猴子也能做到的Hexo個人建站指南

時間：2023-08-03 19:12:02 | 來源：網(wǎng)站運營

時間：2023-08-03 19:12:02 來源：網(wǎng)站運營

猴子也能做到的Hexo個人建站指南：歡迎訪問原文：

---

這篇教程針對沒有任何編程經(jīng)驗的人，甚至是不怎么用電腦的人，使用Hexo搭建屬于自己的靜態(tài)博客。

GitHub + Hexo + fluid 構(gòu)建自己的個人博客

我一直認為能在互聯(lián)網(wǎng)上擁有一塊能夠由自己掌控，且能讓所有人都訪問到空間是一件讓人身心愉悅的事情。

個人博客能極大增加生活的幸福感。
--- 我

誠然目前各種UGC社區(qū)都能夠讓我們發(fā)布自己的內(nèi)容，一些社區(qū)進一步提供了自定義個人空間的選項（比如：花哨的QQ空間）。但完全掌控一個屬于自己的個人空間還是十足具有吸引力的。

通常搭建個人博客需要購買服務(wù)器，購買域名， 備案網(wǎng)站，設(shè)置后端服務(wù)器，編寫自己好看的前端等諸多步驟。對于一個有經(jīng)驗的程序員也會非常勸退。好在現(xiàn)代化的開發(fā)工具幾乎省去了我們所有的煩惱，搭配本節(jié)小標題的幾個工具，能夠0經(jīng)驗者在30分鐘內(nèi)搭建完全屬于自己的個人空間。

個人博客屬于一個非常簡單的網(wǎng)站系統(tǒng)，網(wǎng)站大體可以分為靜態(tài)和動態(tài)兩種。這個概念很好理解，如果一個網(wǎng)站可以根據(jù)訪問者的不同而呈現(xiàn)出不同的內(nèi)容，這個網(wǎng)站就是動態(tài)的。比如你打開本站首頁，不同用戶的推薦內(nèi)容顯然是不同。靜態(tài)網(wǎng)站則是固定的資源，不同用戶訪問同樣一個鏈接得到的必然是同樣的資源。

大部分場景下的個人博客都會是靜態(tài)資源，一個人面對不同的人展現(xiàn)出的自己也應(yīng)該是一樣的。本教程的所有內(nèi)容，也是教你如何搭建一個靜態(tài)博客。如果你有需求想搞一個動態(tài)網(wǎng)頁，那就超出了本教程的范圍。

GitHub：提供網(wǎng)站文件托管+域名Hexo：由markdown文件和配置主動生成網(wǎng)頁靜態(tài)文件fluid：一個我非常喜歡的Hexo主題

讓我們開始吧

如果你真的是完全0經(jīng)驗者，可能會在流程中出現(xiàn)種種問題。遇到問題不要慌，把命令行或者彈窗中的報錯信息直接貼在谷歌/百度中進行搜索，90%的情況下你都能在第一條搜索結(jié)果中找出解決方案。

創(chuàng)建GitHub賬號

GitHub想必大家都聽過，本次GitHub承擔了托管我們的網(wǎng)站靜態(tài)文件，以及提供免費域名服務(wù)的任務(wù)。

如果自己購買，一個域名一年需要100～∞人民幣不等。GitHub會提供給每個用戶<user-id>.github.io (無尖括號)的免費域名，如果你沒有那么高的要求可以直接使用這個域名。

如果想要擁有自己的域名也可以重新定向，我們后面再說。

直接在這個網(wǎng)址注冊賬號：GitHub

創(chuàng)建好賬號之后，你應(yīng)該會在如下界面（如果GitHub沒改版的話）：

點擊左上角的Create repository新建一個名為<user-id>.github.io的目錄，創(chuàng)建的時候一定要新建README.md文件，保證不是一個空的repo。

安裝Node.js和npm

由于幫助我們生成網(wǎng)頁文件的工具Hexo是基于Javascript的，因此我們需要先安裝相關(guān)工具。

首先你需要根據(jù)你的系統(tǒng)谷歌/百度Node.js的安裝，npm是包管理工具，是和Node.js一起的，不需要額外安裝。

OK！假設(shè)你現(xiàn)在已經(jīng)安裝好了，我們現(xiàn)在用命令行測試一下安裝，確保沒有問題。

$ node -vv16.3.0$ npm -v7.15.1-v 表示查看工具版本，如果你能看到輸出的版本號，說明這一步已經(jīng)成功完成了。

用npm安裝Hexo

接下來安裝Hexo，在命令行中輸入如下命令

$ npm install hexo-cli -g安裝以后，可以使用以下兩種方式執(zhí)行 Hexo：

1. npx hexo <command>
2. 將 Hexo 所在的目錄下的 node_modules 添加到環(huán)境變量之中即可直接使用 hexo <command>：

$ echo 'PATH="$PATH:./node_modules/.bin"' >> ~/.profile如下的所有命令假設(shè)你已經(jīng)把Hexo加入環(huán)境變量了，若是你懶得處理環(huán)境變量，每次hexo之前老老實實加上npx吧。

Hexo的官方指南在這里：https://hexo.io/zh-cn/

初始化和配置Hexo、fluid

現(xiàn)在新建一個文件夾，如果你懶得想名字，我建議直接叫hexo-archieve。

在這個`hexo-archieve的外面使用命令行初始化hexo。

$ hexo init hexo-archieve這一步可能需要很長的時間，別著急，倒杯牛奶慢慢等吧。

注意如果文件夾不為空這一步可能失敗。

新建完成后，指定文件夾的目錄如下：

.├── _config.yml├── package.json├── scaffolds├── source| ├── _drafts| └── _posts└── themes其中_config.yml是Hexo的配置文件；source存放你的博客原稿，用markdown寫成，如果你還不會markdown，花30分鐘去學一下再回來吧；scaffolds是博客文章的模板文件，我們并不用管他；packgae.json是Node.js相關(guān)包管理文件。

現(xiàn)在讓我們來下載fluid，fluid是Hexo的一個主題，長這個樣子：

fluid的GitHub鏈接在這里：https://github.com/fluid-dev/hexo-theme-fluid

讓我們首先進入hexo-archieve下載這個主題：

$ npm install --save hexo-theme-fluid然后在博客目錄下創(chuàng)建 _config.fluid.yml，將主題的 _config.yml 內(nèi)容復(fù)制進去。

接下來，修改 Hexo 博客目錄中的 _config.yml：

theme: fluid # 指定主題?language: zh-CN # 指定語言，會影響主題顯示的語言。默認為en，英文現(xiàn)在一切準備就緒，我們可以現(xiàn)在本地快速驗證一下我們的博客長什么樣子了。由于Hexo會幫我們自動新建一個Hello World的博客，所以我們的博客并不是空空如也。

$ hexo server INFO Validating configINFO Start processingINFO [Fluid] Merge theme config from theme_config in _config.ymlINFO ------------------------------------------------| || ________ __ _ __ || |_ __ |[ | (_) | ] || | |_ /_| | | __ _ __ .--.| | || | _| | |[ | | | [ |/ /'`/' | || _| |_ | | | /_/ |, | || /__/ | || |_____| [___]'.__.'_/[___]'.__.;__] || || Thank you for using Fluid theme ! || Docs: https://hexo.fluid-dev.com/docs/en/ || |------------------------------------------------?INFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.點擊http://localhost:4000你就可以看到你的個人博客啦！

一鍵部署

現(xiàn)在你的博客僅僅只能在你的本地瀏覽，這顯然不是我們的初衷。這一環(huán)節(jié)我們將會把博客文件部署到GitHub上去，更具體，是我們一開始建立的repo中去。

首先我們需要GitHub的access token，獲取這個我們需要回到GitHub操作一下，我希望前面的步驟沒有長到讓你忘記賬號和密碼。

點擊右上角你的頭像，選擇setting/設(shè)置

進入setting后選擇Developer settings：

在personal access token中生成新的token：

如果沒問題的話，應(yīng)該會出來如下界面，復(fù)制token（圖里的token已經(jīng)被我刪掉了，別試了）：

現(xiàn)在回到我們的hexo-archieve，修改Deployment（部署部分）為如下：

# Deployment## Docs: https://hexo.io/docs/one-command-deploymentdeploy: type: git repo: <repository url> # https://bitbucket.org/JohnSmith/johnsmith.bitbucket.io branch: [branch] token: [message]repo是你剛才新家的repo的URL；branch是repo的主分支，默認為main；token處復(fù)制剛才生成的token。

npm安裝git插件

$ npm install hexo-deployer-git --save現(xiàn)在一切準備工作就緒，讓我們部署自己的網(wǎng)站吧?。?！

$ hexo clean$ hexo deploy注：第一次不需要hexo clean來清理之前生成的文件，但保險起介，我建議你這么做。

命令行一通輸出之后，你的網(wǎng)站文件已經(jīng)被推送到github上了?，F(xiàn)在通過URL來訪問你的網(wǎng)站吧！

創(chuàng)建About Me

首次使用主題的「關(guān)于頁」需要手動創(chuàng)建：

$ hexo new page about創(chuàng)建成功后，編輯博客目錄下 /source/about/index.md，添加 layout 屬性。

修改后的文件示例如下：

---title: aboutdate: 2020-02-23 19:20:33layout: about---?這里寫關(guān)于頁的正文，支持 Markdown, HTML

新建文章和一些常用操作

當我們每次需要增加新的文章時，我們在hexo的文件夾內(nèi)使用如下命令：

$ hexo new "my-article-title"這會在./source/_posts中新建一個以my-article-title.md為名字的markdown文件，編輯這個文件之后再一次部署，過幾分鐘就可以看到博客的更新了。

$ hexo clean$ hexo deploy

進階操作

自定義域名

(Under Construct)

托管在AWS S3上

(Under Construct)