Xlenco

Xlenco

github
zhihu
email

Hexo|部落格搭建指南

1. 引言#

不知不觉,我的博客已经在风雨飘摇中运行了一段时间了,我觉得有必要详细记录一下博客搭建的过程,以防我不小心搞崩了博客…
image

2. 環境部署#

2.1 安裝 Node.js#

1. 進入官網選擇對應的系統下載:
官網:https://nodejs.org/en/download/

image
2. 安裝
選好路徑,完成安裝
3. 檢查
打開 cmd 或者 powershell, 輸入:

node -v
npm -v

顯示版本號,即安裝無誤
{% note info simple %} npm 為 Node.js 的包管理工具 {% endnote %}

2.2 安裝 Git#

1. 進入官網下載
官網:https://git-scm.com/downloads

2. 安裝
選好路徑,完成安裝

3. 配置 Git 環境變量
右鍵我的電腦 --> 屬性,點擊高級系統設置,最終在環境變量裡添加你的 Git 路徑
Git 路徑示例

C:\Program Files (x86)\Git\bin

{% note danger simple %} 具體路徑以你系統為準 {% endnote %}
image

4. 檢查
打開 git bash 或 cmd,輸入:

git --version

顯示版本號,即安裝無誤
image

5. 在 cmd 中使用 Git
cmd 中輸入 sh 即可

6. 更換 NPM 鏡像源
由於官方默認的 NPM 鏡像源在國內速度不是很好,建議換成淘寶的鏡像

npm config set registry https://registry.npmmirror.com

2.3 註冊 Github 賬號#

1.Github 官網https://github.com,註冊賬號
2. 新建項目
項目名字為你的暱稱.github.io,例如:

// 我的暱稱是xlenco
所以我的項目名稱為xlenco.github.io

3. 代碼庫設置
創建好之後,保存 '<>code' 內的 SSH,即:

[email protected]:XXXX/XXXX.github.io.git

點擊你的倉庫右側的Settings
向下找到Gihub pages, 點擊Launch automatic page generator,Github 將會自動替你創建出一個 pages 的頁面。 如果配置沒有問題,大約幾分鐘之後,yourname.github.io這個網址就可以正常訪問了

2.4 安裝 Hexo#

1. 在合適的位置,如 E:/hexo,安裝 hexo-cli, 輸入:

cd /e/hexo/
npm install hexo-cli -g

再安裝 hexo

npm install hexo --save

安裝完成後,檢查

hexo -v

image
2. 初始化一個文件夾:

hexo init blog // hexo會安裝到blog這個文件夾
cd blog
npm install

3. 生成 Hexo 頁面:

hexo generate

4. 啟動預覽服務:

hexo server

默認是 localhost:4000,打開瀏覽器輸入即可

2.5 推送到 Github#

1. 配置個人信息

git config --global user.name "XXXX"
git config --global user.email "[email protected]"

2. 生成密鑰

ssh-keygen -t rsa -C "[email protected]"

3. 查看 id_rsa.pub 文件,並整個複製

cat ~/.ssh/id_rsa.pub

4. 然後再在Github中添加ssh keyimage
5. 修改 hexo 根目錄下的文件_config.yml中的 deploy,添加之前保存的 ssh:

deploy:
   - type: git
     repo: [email protected]:xlenco/xlenco.github.io.git
     branch: main

6. 上傳到 github:

hexo d -g

如果沒有 hexo-deployer-git,安裝

npm install hexo-deployer-git --save

3. Hexo 相關#

1. 新建文章
hexo new post 我的第一篇文章
2.hexo 自動生成一個 md 文件,修改 md 內容
頭部如:

---
title: postName # 文章頁面上的顯示名稱
date: 2022-08-28 12:30:16 # 文章生成時間,一般不改,當然也可以任意修改
categories: 默認分類 #分類
tags: [tag1,tag2,tag3] # 文章標籤,可空,多標籤請用格式,注意冒號:後面有個空格
description: 摘要
---

3. 在頭部下面即可寫文章內容
{% note info simple %} markdown,支持 html 和其自帶的語法。Markdown 是一種可以使用普通文本編輯器編寫的標記語言,通過簡單的標記語法,它可以使普通文本內容具有一定的格式。{% endnote %}

3.2 新建頁面#

hexo new page "update"
會在 source 文件夾中生成 update 文件夾,其內的 index.md 為頁面內容

3.3 常用基本命令#

hexo new "文章"
hexo new post "文章"
hexo new page "頁面"

hexo cl # 清除緩存
hexo clean # 清除緩存,每次重新部署時最好執行
hexo g # 生成靜態頁面
hexo generate # 生成靜態頁面
hexo s # 本地端口預覽 默認4000運行
hexo server # 本地端口預覽
hexo s -p 5000 # 端口5000
hexo d #部署
hexo deploy #部署

為了方便每次推送可用輸入以下內容

hexo cl && hexo g && hexo d

4. Hexo 進階#

4.1 推薦編輯器#

方便後續寫文章和魔改內容
VSCode https://code.visualstudio.com/
Typora https://www.typora.io/
Qexo https://github.com/Qexo/Qexo
Wexagonal  https://wexa.top/

4.2 更換主題#

1. 因為自帶的主題並不好看,所以可以更換主題,常見主題的很多,例如 butterfly,next...

cd /e/hexo/blog
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

2. 修改 hexo 根目錄下的_config.yml 中的 theme: landscape 改成 theme: butterfly ,(注意冒號:後面有一個空格)

載入中......
此文章數據所有權由區塊鏈加密技術和智能合約保障僅歸創作者所有。