搭建部落格 (Hexo + github + butterfly主題)

sjbhz發表於2024-06-09
HexoGithub

1、下載安裝Nodejs

node -v
npm -v

2、安裝淘寶映象cnpm管理器

npm install -g cnpm --registry=http://registry.npm.taobao.org
cnpm -v　

3、安裝hexo框架

cnpm install -g hexo-cli
hexo -v

4、安裝git (若有github賬號可直接跳過本條)

git使用前配置：
下載完git後，需要告訴 git 你是誰，在向 git 倉庫中提交時需要用到。

1、配置提交人姓名：git config --global user.name 提交人姓名
2、配置提交人姓名：git config --global user.email 提交人郵箱
3、檢視git配置資訊：git config --list

5、使用hexo搭建部落格 (git bash/shell 開啟)

5.1 在指定位置建立資料夾，初始化hexo

mkdir blog  #建立blog目錄
cd blog   #進入blog目錄
hexo init  #生成部落格 初始化部落格
hexo s  /  hexo server  #啟動本地部落格服務

初始化之後，ls -al 檢視可得檔案
_config.landscape.yml db.json package.json public/ source/ yarn.lock
_config.yml node_modules/ package-lock.json scaffolds/ themes/

其中 _config.yml 是配置檔案
themes/ 存放部落格主題

5.2 建立post

hexo new "我的第一篇部落格文章"

cd source/_posts
ls -al
可檢視所有的.md檔案

5.3 編輯部落格文章內容

vim 我的第一篇部落格文章.md
編寫格式遵循markdown格式

5.4 進入建立部落格目錄blog的主目錄，執行清理工作，再執行生成工作

ls   (檢視在_posts目錄)
cd ../..  
pwd 
hexo clean 
hexo g  /  hexo generate   #生成釋出用的靜態頁面,存在public檔案中

生成工作完成後，會出現目錄 ......../我的第一篇部落格文章/index.html

5.5 重新啟動

hexo s

至此，部落格僅在本地localhost:4000啟動,但是若需要可被遠端訪問，
接下來可部署到github來公開使用

6、github建立部落格倉庫

6.1 進入github,建立Repository 空倉庫

注意：Repository name 命名格式為 （owner）.github.io
必須是自己的github使用者名稱.github.io

比如 ： 
    Owner : sjbhz
    Repository name : sjbhz.github.io

6.2 進入command/bash視窗，在建立的blog目錄下安裝一個git 部署外掛

cnpm install --save hexo-deployer-git

6.3 設定_config.yml配置檔案

vim _config.yml

_config.yml配置檔案中：
    #Deployment
    ##Docs: https://hexo.io/docs/deployment.html
    deploy:
        type: git
        repo: https://github.com/sjbhz/sjbhz.github.io.git
        branch: master

配置好，儲存退出

6.4 將部落格部署到遠端

hexo deploy / hexo d
輸入賬號密碼

6.5 重新整理創庫，訪問 sjbhz.github.io

7、更換主題

開啟butterfly網站  https://butterfly.js.org/posts/21cfbf15/

7.1 下載主題

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

7.2 修改配置

修改站點配置檔案_config.yml，把主題改為butterfly

_config.yml配置檔案中：
    theme: butterfly

7.3 進行清理，再重新生成，部署，再推送上傳至github

hexo clean 
hexo g
hexo s  
hexo deploy

補充：

換主題時報 extends includes/layout.pug block content #recent-posts.recent-posts include includes/recent-posts.pug include includes/pagination.pug

解決：

在hexo目錄下開啟git bash，輸入命令：

npm install –save hexo-renderer-jade hexo-generator-feed hexo-generator-sitemap hexo-browsersync hexo-generator-archive

8、Hexo增加搜尋功能

8.1 安裝搜尋：在Hexo的根目錄下

npm install hexo-generator-searchdb --save

8.2 全域性配置檔案_config.yml，新增

search:
    path: search.xml
    field: post
    format: html
    limit: 10000

8.3 hexo主題配置檔案（\themes\next_config.yml），修改local_search的enable為true

# Local search
# Dependencies: https://github.com/flashlab/hexo-generator-search
local_search:
    enable: true
    # if auto, trigger search by changing input
    # if manual, trigger search by pressing enter key or search button
    trigger: auto
    # show top n results per article, show all results by setting to -1
    top_n_per_article: 1

我的部落格：搭建部落格 | Keep Going, Keep Down (sjbhz.github.io)

相關文章