使用hexo搭建自己的github pages博客[皮膚:Shoka & multi-markdown-it]

環境

Windows11
Powershell/CMD
Nodejs

新建倉庫

首先新建github倉庫(初始化什麼的都不要選,保持空倉庫) <你的用戶名>.github.io
如我的是 sky5454.github.io
然後點該倉庫的Settings
image
設置好分支和pages讀取的路徑

克隆倉庫

這一步按照空倉庫的提示,將github倉庫克隆到本地電腦即可

安裝 hexo

安裝 nodejs
然後

npm install -g hexo-cli
cd 你剛克隆的空的git倉庫
hexo init
npm install

然後生成並在本地運行

hexo clean
hexo generate
hexo server

瀏覽器打開 localhost:4000 查看效果,然後按Ctrl+C關閉服務

部署到 github

修改 _config.yml,主要修改以下這段:

deploy:
  type: git
  repo: https://github.com/你的用戶名/你的用戶名.github.io.git
  branch: main

安裝hexo git部署命令,

npm install hexo-deployer-git --save

然後部署到 github

hexo clean
hexo generate
hexo deploy

修改主題爲好看又強大的Shoka

參考:https://shoka.lostyu.me/computer-science/note/theme-shoka-doc/

安裝主題

安裝主題本體:

# cd your-blog
git clone https://github.com/amehime/hexo-theme-shoka.git ./themes/shoka

安裝依賴插件:

npm un hexo-renderer-marked --save
npm i hexo-renderer-multi-markdown-it --save --ignore-scripts
npm install  hexo-autoprefixer hexo-algoliasearch hexo-symbols-count-time hexo-feed --save

修改 _config.yml,主要修改以下這段:

theme: shoka

本地運行查看效果(localhost:4000)

hexo clean
hexo generate
hexo server

然後部署到 github

hexo clean
hexo generate
hexo deploy

如果你還需要更多自定義,請修改 themes\shoka\_config.yml,配置項含義見:
https://shoka.lostyu.me/computer-science/note/theme-shoka-doc/config/

demo效果展示:https://sky5454.github.io
image

目錄結構:
其中source_ports下的markdown文件就是博客文章,這些md文件在每次編譯後都會生成爲網頁保存在public目錄下,如果你覺得手動編譯麻煩,還可以使用github Action在每次提交文章後自動編譯
image

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章