余額
優惠劵
退出賬號
一小時搭建完自己的個人網站
2020-11-13 05:05:23
擁有自己的個人網站一直是我的一個目標。
在網上看了很多方法之后我最終選擇了GitHub Pages + Hexo這條技術路線，原因有兩點：
- 完全免費，學生黨沒有多少錢。
- 比較方便，有現成的框架可用。
整個搭建過程快的話半小時就可以搞定。
搭建完成后大概是這樣子的：青羽的博客
1. 準備環境
準備一個GitHub賬號：GitHub
新建一個Repositories，Repository name填 你的GitHub用戶名.github.io
下載并安裝NodeJS：Node.js
下載并安裝Git for Windows：Git for Windows
2. 配置Git
鼠標右鍵打開Git Bash：
輸入命令配置用戶名和郵箱信息：
git config --global user.name "你的GitHub用戶名"
git config --global user.email "你的GitHub注冊郵箱"
生成ssh密鑰文件：
ssh-keygen -t rsa -C "你的GitHub注冊郵箱"
默認不設置密碼，直接回車就行。
用文本編輯器打開生成的id_rsa.pub文件，Crtl+A，Ctrl+C復制全部內容。
打開GitHub的SSH設置頁面：SSH and GPG keys
New SSH key，Title任取，Key粘貼剛剛復制的字符串，Add SSH key
3. 配置Hexo
Hexo是一個博客框架。接下來，開始安裝Hexo。
選定一個文件夾作為存放博客文件的目錄，在選定的文件夾內右鍵打開Git Bash，輸入命令：
npm install hexo-cli -g
等待安裝完成后，輸入：
hexo init blog
這里的blog是用戶自己取的一個站點目錄名字。
初始化完成后進入站點目錄并安裝依賴：
cd blog
npm install
到這一步，本地博客算是搭建好了，測試一下：
hexo s
s是server的縮寫，表示啟動本地服務器。默認情況下，訪問網址是：http://localhost:4000/
如果成功的話可以看見官方的默認頁面：
4. 部署網站
在站點目錄下可以看到有如下文件：
其中_config.yml為站點配置文件，用文本編輯器打開，Crtl+F查找 url 字段，修改為：
url: https://你的GitHub用戶名.github.io/
再翻到最后找到 deploy 字段，修改為：
deploy:
type: git
repo: https://github.com/你的GitHub用戶名/你的GitHub用戶名.github.io.git
branch: master
上面的 repo 字段的值可以直接從GitHub倉庫復制：
部署之前要先安裝Git部署插件，輸入命令（注意：之后的命令均在站點目錄下執行）：
npm install hexo-deployer-git --save
最后，輸入命令：
hexo clean
hexo g -d
g是generate的縮寫，表示生成靜態文件；d是deploy的縮寫，表示部署到網站上。
打開瀏覽器，輸入你的網站地址：https://你的GitHub用戶名.github.io/，就可以看到你的網站已經上線了，大功告成！
5. 發布文章
在命令行中輸入：
hexo n "HelloWorld"
n是new的縮寫，表示新建一篇文章。
就可以看到在source/_posts目錄下多了一個HelloWorld.md文件，這就是一篇文章的源文件了。寫完之后生成、部署即可。
文章使用Markdown寫成，關于Markdown可參考：Markdown 教程 | 菜鳥教程
要刪除文章的話，直接把源文件刪除即可（確保至少有一篇文章存在，否則可能出錯）。
6. 優化網站
1. 更換主題
Hexo有許多好看的主題，這里以我用的NexT主題為例講解怎樣更換主題：
- 下載主題：Releases · theme-next/hexo-theme-next
- 解壓所下載的壓縮包至站點的 themes 目錄下，并將解壓后的文件夾名稱（hexo-theme-next-x.x.x）更改為
next - 打開站點配置文件_config.yml，找到
theme字段，并將其值更改為next；找到language字段，并將其值更改為zh-CN（在themes/next/languages目錄下可查看主題支持的語言） - 在切換主題之后， 我們最好使用
hexo clean命令來清除 Hexo 的緩存
在更換了主題之后界面美觀了許多，終于可以舒舒服服地寫文章啦~
但是很不好意思，倘若你的文章里有LaTeX公式或者圖片，你會發現顯示不正常……
作為一名技術宅，文章里怎么可能不用公式不用圖片嘛，這兩個坑必須解決了！
2. 插入LaTeX公式
更換支持LaTeX公式的Markdown渲染器：
npm uninstall hexo-renderer-marked
npm install hexo-renderer-kramed --save
打開主題配置文件（themes/next/_config.yml），找到 math 字段，修改為：
math:
enable: true
per_page: false
至此，LaTeX公式插入問題解決！
3. 插入圖片
首先打開站點配置文件_config.yml，找到 post_asset_folder 字段，并將其值更改為 true ，這樣新建文章的同時Hexo會自動在同目錄下新建一個以文章名命名的空文件夾以方便存放該文章要用到的資源。
安裝一個能上傳本地圖片的插件：
npm install https://github.com/CodeFalling/hexo-asset-image --save
假設在
+---HelloWorld
| +-- 1.jpg
| +-- 2.jpg
| +-- 3.jpg
+---HelloWorld.md
這樣的目錄結構（目錄名和文章名一致）中，在文章源代碼里只要使用形如  這樣的語句就可以插入圖片了~
4. 更多
關于Hexo框架的更多信息請參考：Hexo
關于NexT主題的更多信息請參考：NexT - Theme for Hexo
