保姆級個人博客搭建教程

保姆級個人博客搭建教程

外鏈圖片失效可以移步個人博客

對於一個正在學習的小白來說，有一個地方來記錄和總結自己的學習經驗和學習經歷當然是很有必要的。而一個人博客就很好的提供了這樣子的平臺，那麼今天我就以自己的博客爲例來帶大家一步一步搭建起自己的個人博客。這裏是我的博客效果。

過程涉及：

• node環境搭建
• hexo安裝初始化
• git環境搭建
• 碼雲倉庫
• MarkDown
• Typro+PicGO+SM.MS

Hexo是一款基於Node.js的靜態博客框架，依賴少易於安裝使用，可以方便的生成靜態網頁託管在GitHub和Coding上，是搭建博客的首選框架。這裏是官網和github地址。大家可以進入官網進行詳細查看，因爲Hexo的創建者是臺灣人，對中文的支持很友好，可以選擇中文進行查看。

node.js 安裝

點擊這裏進入下載頁面

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-vSBMSkMh-1590338330285)(https://i.loli.net/2020/05/24/gLukP65f8Cy19vU.png)]

然後就一直下一步，等安裝完成去命令行中輸入

node -v
npm -v                                                                      
# 如果顯示版本號就說明安裝成功了
npm config set registry https://registry.npm.taobao.org
# 由於服務器原因可以配置一個淘寶鏡像來快速的下載和安裝一下文件
npm config get registry
# 檢查鏡像是否配置成功

hexo 安裝

在配置好了node環境之後我們就可以安裝我們的博客系統了。

直接在命令行中開始下載安裝hexo

npm install hexo-cli -g 
# 下載安裝hexo
hexo -v 
# 檢查版本號來檢驗是否安裝成功
hexo init blog 
# 進入一個空的文件夾來作爲你的博客資源目錄
cd blog
# 進入你的博客資源目錄
npm install
# 安裝hexo需要的依賴

hexo的項目目錄文件

• node_modules: 依賴包

• public：存放生成的頁面

• scaffolds：生成文章的一些模板

• source：用來存放你的文章

將你寫好的MarkDown形式的文章放在 \source\ _posts下面就行了

• themes：主題

• _config.yml: 博客的配置文件

hexo g
# 生成靜態資源文件
hexo s
# 本地服務器運行

啓動瀏覽器訪問http://localhost:4000/就能看到你的博客的初始demo了

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-RNqlqfSg-1590338330293)(https://i.loli.net/2020/05/24/T9alEhunDIkmjbQ.png)]

hexo常用命令

hexo g 或 hexo generate
# 該命令執行後在hexo站點根目錄下生成public文件夾
hexo clean
# 把public文件夾刪除
hexo s 或 hexo server
# 啓動服務預覽
hexo d 或 hexo deploy
# 部署項目

git 安裝

爲了是我們的博客讓別人也能訪問到，這裏我們需要將博客部署到遠端。

Git是目前世界上最先進的分佈式版本控制系統，可以有效、高速的處理從很小到非常大的項目版本管理。也就是用來管理你的hexo博客文章，上傳到GitHub或碼雲的工具。

在這裏下載 git 並一直下一步進行安裝

git --version
# 檢查git是否安裝成功

配置好 git 環境之後我們就可以開始我們的遠端部署了

我們可以將其部署到本地服務器、購買的阿里雲服務器或者github(或碼雲)上面。這裏我選擇的是碼雲(和GitHub差不多，不過畢竟服務器在國內還是比較方便的)，必經本性還是白嫖黨。

創建碼雲倉庫

1. 首先去註冊一個碼雲賬號，戳這裏

2. 新建一個倉庫 不過這裏要注意的是倉庫名即爲你博客地址的二級域名

3. 開啓page服務

   [外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-lkuSHg9A-1590338330295)(https://i.loli.net/2020/05/24/pJzRnxLTXVrwiPd.png)]

   在這裏就可以看到自己的博客域名了，不過要注意的是每次更新博客都要來這裏主動更新一次

遠程部署

需要先安裝一個hexo的一鍵部署插件

npm install hexo-deployer-git --save

配置根目錄下的_config.yml文件

deploy:
  - type: git
  	# 部署方式
    repo: https://gitee.com/fabian4/fabian4.git
    # 你的遠程倉庫地址
    branch: master
    # 你的部署分支

然後開始進行遠程部署

hexo d
# 一鍵部署到遠程倉庫

在部署過程中會讓你驗證自己碼雲的賬號密碼。部署結束之後就可以就可以去你的碼雲倉庫檢查一下

然後將page服務更新之後，就可以去你的域名訪問你的個人博客了。

主題安裝

在公網IP可以訪問自己的博客之後，我們就可以開始進行我們博客的美化了。

可以去下面的鏈接挑一款適合自己的個人博客主題。

• https://blog.csdn.net/zgd826237710/article/details/99671027
• https://blog.csdn.net/fail_perfectly/article/details/83791781
• https://www.zhihu.com/question/24422335
• https://hexo.io/themes/ 這個是hexo官網的主題

然後就是按照主題的官方文檔和hexo的官方文檔去修改你的配置來達到你想要的結果

這裏一定一定一定一定要在修改你的配置文件之前將他備份一遍

不然要是你哪裏改錯了，又查不出來。就只能從頭開始了

MarkDown

在開始寫你的第一篇博客之前，我要強烈推薦一類強大的文本編輯器——MarkDown

這是爲那些需要經常碼字或者進行文字排版的、對碼字手速和排版順暢度有要求的人羣設計的，他們希望用鍵盤把文字內容啪啪啪地打出來後就已經排版好了，最好從頭到尾都不要使用鼠標。這些人包括經常需要寫文檔的碼農、博客寫手、網站小編、出版業人士等等。

配合hexo，只需要將你寫好的MarkDown形式的文章放在 \source\ _posts下面就行了

選擇MarkDown的幾個理由

• Markdown編輯器非常輕量級，並且有很多免費的支持Markdown語法的在線編輯器
• 語法簡單，不需要計算機基礎，任何人都能學會，Markdown常用的語法規則就幾個，幾分鐘就能輕鬆掌握
• 不存在版本不同不兼容的問題，你甚至可以在記事本中寫，然後複製到任何支持Markdown語法的編輯器中
• 現在很多平臺都支持Markdown寫作，比如有道雲筆記、印象筆記、CSDN、知乎、簡書、Github、碼雲。

標題設置
    一級標題： 內容前加 #
    二級標題： 內容前加 ##
    三級標題： 內容前加 ###
加粗和斜體
    加粗：加粗內容兩端加 **
    斜體：斜體內容兩端加 *
引用
	引用內容前加 >
列表和加框
    列表：列表內容前加 * 或 -
    加框：加框內容兩端加 `
插入圖片
	圖片：！加 [圖片名稱] 加 (圖片網址)
插入鏈接
	鏈接：[文字] 加 (鏈接網址)
郵箱地址
	郵箱：<郵箱地址>
刪除線和分割線
	刪除：刪除內容兩端加 ~~
	分割線：三個或以上的 * 或 -

這裏放一個MarkDown的語法教程鏈接

推薦一款 乾淨、高效、簡潔、開源的MarkDown編輯器——Typora 這裏是官網地址

• 完美支持 Github 的 Markdown 語法；
• 人性化的書寫方式：
  • 表格的書寫、挪動；
  • 圖片，超鏈接，網頁表格複製；
  • 目錄生成；
• 支持 LeTex 公式書寫；
• 支持 Flowchart，Mermaid 等流程圖繪製；
• emoji，高亮，備註，上標，下標等書寫；
• 生成網頁，pdf，圖片，甚至 word，LeTex 等格式。

配置圖牀

在我們編寫博客文章的過程中，不可避免的需要引用圖片來更加直觀和生動。而本地圖片的地址鏈接會讓你的文章的一些上傳等操作不方便。這裏帶大家搭建自己的圖牀並關聯到Typro上一鍵上傳雲端。

​ Typro+PicGo+SM.MS

安裝PicGO

所謂圖牀工具，就是自動把本地圖片轉換成鏈接的一款工具，網絡上有很多圖牀工具，就目前使用種類而言，PicGo 算得上一款比較優秀的圖牀工具。它是一款用 Electron-vue 開發的軟件，可以支持微博，七牛雲，騰訊雲COS，又拍雲，GitHub，阿里雲OSS，SM.MS，imgur 等8種常用圖牀，功能強大，簡單易用。

我們去Github上的地址去下載安裝包

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-CfFK4zxv-1590338330300)(https://i.loli.net/2020/05/24/1TVWIQZ7sutL8n2.png)]

配置圖牀

作爲白嫖黨，我選擇SM.MS，對於個人用戶來說完全免費且夠用。

• 去官網註冊並登錄

• 去這個地址獲取你的Token

  [外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-hJbotFoj-1590338330304)(https://i.loli.net/2020/05/24/8bxq9AXajGig1pY.png)]

• 在PicGo中安裝插件

  [外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-zRQeswXC-1590338330305)(https://i.loli.net/2020/05/24/5zMXx9gaJeVWU3Y.png)]

• 連接圖牀

  [外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-xA3gAHuU-1590338330306)(https://i.loli.net/2020/05/24/8bIRGChUwlkDX9O.png)]

連接Typro

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-zXcJASnt-1590338330307)(https://i.loli.net/2020/05/24/idpvCNho6zLKMBm.png)]

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Qnrh2xLl-1590338330309)(https://i.loli.net/2020/05/24/kfBJaPT8H24KbCR.png)]

最後可以進行測試，如果成功就說明已經搭建成功了。

下面就可以開始寫你的第一篇個人博客了

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-K1O9OyjM-1590338330310)(https://i.loli.net/2020/05/24/dBo5PRl6OfJkjem.jpg)]