【最新版】30分鍾教你搭建屬於自己的個人博客

【最新版】30分鍾教你搭建屬於自己的個人博客

簡介：

• 本教程是以Hexo和Coding pages 為基礎，搭建個人的靜態博客網站
• Hexo Hexo官網 快速、簡潔且高效的博客框架
• Coding CODING - 一站式軟件研發管理平台 代碼持續集成，持續部署

准備:

古人雲： 工欲善其事必先利其器

我們在開始搭建之前，要准備好本地的環境。

1. 一個好的文本編輯器，如：Vscode，Notepad3...等等‘
2. Node v14.X版本
3. git

開始:

1.配置coding倉庫

注冊完coding賬號后，來到項目頁，點擊創建項目。

然后我們選擇項目模板為代碼托管和自動化部署。

然后我們要填寫一些項目的配置信息。

接下來，我們選擇創建代碼倉庫。

完成創建后，我們會得到一個鏈接，如下圖：

這樣子我們的代碼倉庫就創建完成了，這個代碼倉庫有什么用處呢。

1. 為后面在Coding部署我們的靜態博客作前提准備
2. 存儲我們hexo的靜態文件

2.配置Hexo

接下來就輪到我們的Hexo博客框架登場了。

Hexo的官方中文首頁

來到Hexo的官網，首頁是這樣子的。

可以看到Hexo依賴Nodejs來生成靜態頁面，而且文章是支持Md格式的，更重要的是他能夠在我們添加修改文章后，一鍵部署到我們的代碼倉庫中，實現修改，並且hexo有許多優秀的插件。

第一步，在本地克隆我們之前新建的代碼倉庫。在你存放代碼文件的盤上，新建一個文件夾。然后右鍵打開git bash。

輸入命令並運行：

git clone 你的倉庫地址

這里的倉庫地址指的是你創建好倉庫后，系統給你的鏈接。

克隆好后，我們的文件夾結構是這樣子的。

然后我們在上方的文件夾路徑中直接輸入cmd，打開cmd，注意：這里打開的cmd是管理員，如果不是管理員可能會出錯。

輸入命令：

npm install hexo-cli -g

然后輸入命令:

hexo init 你博客的名字

成功后，你的文件夾會多出一個文件夾，里面存放的則是Hexo的源文件。

接下來，我們則要安裝Hexo的相關依賴，在cmd中輸入命令

cd 文件夾名稱 這里的文件夾名稱就是新出現的文件夾
npm install

這樣子就成功了。

然后還需輸入命令，來安裝hexo的git插件

npm install --save hexo-deployer-git

如果沒有安裝該插件我們則不能push文件到coding上。

具體Hexo文件夾各個文件的作用，詳細見：建站 | Hexo

接下來，我們來新建一篇文章，打開根目錄下的source文件夾，再進入_posts文件，可以看到系統已經為我們初始化好了，一篇文章hello-world.md .

我們新建一個md文件，然后在開始部分，輸入我們這篇文章的信息

源代碼:

---
title: 我的HexoDemo第一篇文章
date: 2021/10/31 13:29:00
---



## 這是我的博客第一篇文章

這是我的博客第一篇文章，請大家多多支持我！

可以看到文章上方有一些配置信息，title,date，這些是信息用來指定個別文件的變量，也就是指定文章的信息。

具體還有其他配置，詳細見: Front-matter | Hexo

接下來，我們需要配置Hexo中一鍵部署的功能，打開hexo根目錄中的config.yml

在最下面的deploy中，按照圖中的格式來修改：

注意：這里的repo的鏈接是你倉庫的鏈接，也即coding倉庫的git地址。

最后的最后，把我們Hexo根目錄中所有的文件，剪切到上一個文件夾中，也就是目錄含有隱藏文件夾.git

然后我們在此文件夾打開cmd，輸入命令：

hexo g -d

這個命令是兩個命令合在一起，分別是hexo generate和hexo deploy

最后我們的倉庫是這樣子的。

至此，我們的Hexo的基礎配置也結束了。

3.在coding部署博客

首先，在代碼倉庫頁，點擊倉庫設置。

在訪問設置中，把公開源代碼勾上。

然后我們點擊左邊的網站托管

這里我們需要掃碼授權騰訊雲。

進行實名認證后，點擊新建網站，按照圖中配置。

網站類型選擇：靜態網站，節點的話，如果你后面有自定義域名的需要，那么如果節點是在國內的話，那么域名就必須要進行備案，如果節點為香港，那么域名如果是在外國服務商購買的話，就不需要備案，國內服務商購買的話仍需要進行備案。 這里我們選擇廣州節點。

然后，點擊確認，網站就會進行部署。

然后等待部署成功。

點擊訪問后，就可以看到我們的博客了。

同時也能夠看到我們之前新建的文章。

4.修改文章或配置后如何重新部署上線

假如我們現在需要對文章進行修改，或者安裝新的插件，那么我們在做完一系列操作后，只需要再次執行部署命令Hexo g -d即可重新部署上線。

5.怎么自定義主題

配置 | Hexo 在官網的文檔里，我們可以知道Hexo的config.yml里每個配置項的作用，這里我推薦幾個主題，分別是Butterfly 安裝文檔(一) | Butterfly和 NexT，Next的中文文檔地址：開始使用 - NexT 使用文檔，我自己本人用的是Butterfly主題。

6.怎么綁定自己的域名

我們首先要在域名服務商購買了域名，而且成功備案后才能夠綁定自己的域名，如果你選擇的是香港節點，那么可以去國外的域名服務商購買域名，則不需要備案。

我們先點進部署項目

點擊自定義域名，然后按照步驟進行綁定。

須知：

綁定自定義域名后，請將域名 DNS 中的 CNAME 記錄設置為表格中的地址；自定義域名生效后每次進行部署需要刷新CDN緩存，耗時約 5 分鍾。查看幫助文檔

申請 SSL 證書需要一定的時間，申請通過后會有短信通知；如果申請失敗，可以重新申請；點擊證書狀態可以查看申請進度。申請通過后請重新部署一次網站。

節點在大陸境內的網站使用自定義域名時需要備案，備案成功后可能會有短暫延遲，延遲最長兩天。未備案和備案延遲期內，網站部署可能失敗。

7.如何更便捷的編寫和修改文章

我們可以使用vscode編輯器，安裝以下兩個插件。

然后側邊欄就會有一個新增的選項，我們可以在這里快捷地新建文章，而且我們新建文章會初始化基礎的文章配置，時間，主題，分類，標簽等等。

最后我們快捷鍵ctrl+shift+p可以快捷地執行hexo g -d命令，快速進行部署上線。

8.Hexo的跨設備同步

在我們日常使用中很有可能，要在多台設備上進行寫作，那么我們該怎么保持配置文件的一致呢。

我們在hexo根目錄下新建一個.gitignore文件，里面填入如下配置

.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/

然后打開git bash輸入命令

git branch 分支名  /* 新建分支，分支名任意 */
git checkout 分支名 /* 切換到分支 */
git add .
git commit -m "Hexo的源文件"
git push origin 分支名 /* 這里的分支名對應新建的分支名 */

然后我們就可以在代碼倉庫中看見新的分支，新的分支里正是我們的Hexo源文件。

以后我們在某一台設備上新建修改了文章或者安裝了新的插件后，我們就執行如下命令即可.

git add .
git commit -m "信息"
git push origin 存放源文件的分支名

即可把文件同步上去。

我們還可以把默認分支改為Hexo源文件分支，把靜態文件master分支隱藏掉。

這樣子我們只要在新的設備上克隆倉庫，執行npm install后即可完成同步。

結尾：

最后看一下，butterfly主題美化后的博客效果。