採取HEXO+NexT主題+github.io的方式建立自己的個人主頁

採取HEXO+NexT主題+github.io的方式建立自己的個人主頁

---

主要知識點

1. 註冊github帳號，建立io倉庫。
2. 本地配置HEXO博客。
3. 克隆NexT主題到本地倉庫
4. 建立本地博客與github倉庫的鏈接
5. 進行寫作

---

名詞解釋

1. Github 代碼倉庫 - 一個基於git版本控制的程序倉庫,不用多說。
2. Hexo 博客框架 - 一個快速、簡潔且高效的博客框架。用她來寫博客

Hexo 是高效的靜態站點生成框架，她基於 Node.js。 通過 Hexo 你可以輕鬆地使用 Markdown 編寫文章，除了 Markdown 本身的語法之外，還可以使用 Hexo 提供的 標籤插件 來快速的插入特定形式的內容。

3. NexT 博客主題 - 一個非常精簡的Hexo博客主題。
4. SSH - 安全外殼協議，簡單來說，設置github ssh是爲了後續寫文章上傳時不用每次輸帳號密碼。
5. git - 一種版本控制工具，在構建個人博客中只需瞭解git clone的用法即可。
6. Markdown - 一種可以使用普通文本編輯器編寫的標記語言，通過簡單的標記語法，它可以使普通文本內容具有一定的格式。知戶、簡書、CSDN等主流文字平臺都支持的格式，熟練寫作後排版美觀又工整。
7. VScode - 一款輕量級、開源的文本編輯工具及編譯器。她就是我們寫博客的主力工具。當然Notepad++和Sublime Text也可以用來寫作。

---

具體操作步驟

Github 帳號註冊及倉庫創建

1. 首先點擊名詞解釋中的Github 代碼倉庫進入網站，點右側的Sign up for Github進行帳號註冊。
   按照要求進行信息填寫即可，注意選擇free方案。詳細步驟可參考github註冊-極客學院wiki。
2. 建立新倉庫，登錄進入github，右上角能看到頭像和加號。
   
   點擊加號，彈出下拉菜單，點擊New repository，進入新建倉庫界面。
   這裏只有一個地方要特別注意，就是倉庫的名字。
   

此處請把將我圈出的your_user_name替換成你的賬戶名，也就是前面按鈕中的Owner下的賬戶名，不要錯字。
這裏配置倉庫完成後，github的操作暫時告一段落。

---

Hexo 博客本地配置

1. 安裝Node.js，選擇WIN下64位的安裝包進行安裝。***安裝時，如果有Add to PATH選項，請勾選！！！***。
   
2. 安裝Git，選擇64位WIN安裝包下載安裝，***安裝時，如果有Add to PATH選項，請勾選！！！***。
   
3. 以上安裝成功後，在你想放博客的文件夾路徑下，右鍵選擇 git bash here。
   接着利用如下命令安裝 Hexo 博客框架:

npm install -g hexo-cli (就是在你剛纔打開的git命令行工具中粘帖進去)

5. 利用Hexo的命令初始化博客，輸入以下命令:

hexo init myblog
cd myblog
npm install
這裏注意，myblog可以替換任意你喜歡的名字(下面我都用myblog代替)，Hexo會以這個名字建立文件夾並進行相關初始化。

6. 當完成上述操作後，在myblog文件夾中能看到如下目錄結構。

_config.yml
package.json
scaffolds
source
├── _drafts
├── _posts
themes

文件簡介: source是存放用戶資源的地方，_post用於存放你的文章，_draft用於存放草稿。
themes 用於存放Hexo博客的主題文件，我們下面要設置的NexT主題就要放在這個文件夾下。_config.yml是博客的配置文件，裏面可以修改很多屬性，這個yml文件要與接下來的NexT主題中的同名文件區分，後面再講。

6. 安裝必備的插件,執行命令:

npm install hexo-deployer-git --save

7. 完成以上步驟後，可以初步測試一下你的博客。利用以下命令生成頁面:

hexo g(這個是 hexo generate 命令的簡寫)
本地啓動博客
hexo s(hexo server 的簡寫)
瀏覽器輸入
http://localhost:4000 是不是打開了你的博客呢，如果到這一步沒有成功，請聯繫我哦。

---

Hexo 本地博客鏈接 github.io

1. 用記事本或文本編輯工具打開**_config.yml**文件，搜索 deploy 字段，以我的配置舉例:

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: [email protected]:***jqf64078/jqf64078***.github.io.git
branch: master
請把我上述文字中標斜體的部分，替換成你自己的github用戶名。

2. 輸入命令 hexo g -d ，應該提示你輸入用戶名和密碼，按照github的用戶名和密碼輸入即可，完成上傳。
   這時稍等片刻，打開你的網站看看有沒有成功:

http://XXXXXX.github.io/

3. 配置github ssh，避免每次上傳都輸入賬戶密碼。

• 3.1 檢查本機是否有ssh key設置，在桌面右鍵點擊 git bash here，輸入指令:

cd ~/.ssh 或cd .ssh 如果沒有則提示:No such file or directory。如果進入了文件夾，
繼續輸入指令 ls 列出所有文件。檢查是否已經存在 id_rsa.pub 或 id_dsa.pub 文件,如果沒有就進行下一步，如果有可以直接跳過下一小步。

• 3.2 輸入以下命令創建SSH Key:

ssh-keygen -t rsa -C "[email protected]" 注意這裏把郵箱替換成你的github郵箱
連續點擊三次回車，採用默認配置，這時會生成id_rsa.pub 和 id_dsa.pub 文件。

• 3.3 將密鑰內容複製到github ssh配置中，利用如下命令:

clip < ~/.ssh/id_rsa.pub 就是拷貝id_rsa.pub文件中的所有內容，用記事本也可以。
打開你的github主頁，右上角加號點擊，下拉菜單中選擇 Settings。進入後選擇左側SSH，如下圖。

點擊右上角New SSH Key，把剛纔複製的內容粘帖進去保存即可。

• 3.4 至此Hexo博客與github的鏈接完成。

---

NexT 主題配置

1. 進入你的博客文件夾目錄下，右鍵git bash here，然後輸入如下指令:

git clone https://github.com/iissnan/hexo-theme-next themes/next
這一步的目的是把NexT主題克隆到你自己的theme文件夾中。

2. 替換Hexo的主題，打開你博客文件夾目錄下的**_config.yml**，搜索theme字段，替換成下面這樣:

theme : next
至此，NexT主題也就安裝完畢了，是不是很簡單。

3. 再次執行命令 hexo g -d,稍等片刻後再進入你的網站看看，主題是不是已經更換了。

---

開始寫作

1. 介紹三個常用的命令:

hexo new "XXX" 建立新的文章，注意雙引號中是文章的名字
hexo g 生成頁面
hexo d 發佈
正常日常寫作，熟悉這三個命令就夠了。爲避免篇幅太長，後面我再出一期專門講主題裏的各項設置。今天關於博客的搭建過程就講到這裏了！

---