在github使用hexo搭建靜態博客

安裝前提

安裝 Hexo 之前需要先安裝下列應用程序：

• Node.js (Node.js 版本需不低於 8.10，建議使用 Node.js 10.0 及以上版本)
• Git

安裝hexo

所有必備的應用程序安裝完成後，即可使用 npm 安裝 Hexo。

npm install -g hexo-cli

使用hexo

安裝 Hexo 完成後，請執行下列命令，Hexo 將會在指定文件夾中新建所需要的文件。

npx hexo init <folder>

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

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

安裝github自動提交工具

npm install hexo-deployer-git --save 

配置祕鑰訪問github

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

直接按三次回車，可不用輸入密碼 然後打開C盤查找Users/當前用戶目錄(Administrator),找到.ssh文件夾 打開文件夾下的id_rsa.pub文件，將裏面文字全部複製， 打開github個人主頁 (https://github.com/settings/ssh) ,點擊 Add SSH Key 按鈕，粘貼進去保存即可

在github配置訪問公鑰 

 

新建文章

hexo new [layout] <title>

生成靜態文件

npx hexo g

啓動服務

npx hexo s

部署到github

npx hexo d

清除緩存

npx hexo clean

 

hexo官方文檔：https://hexo.io/zh-cn/docs

---

配置主題

hexo官網有許多主題可以選擇，這裏筆者使用的是next主題

next主題：https://theme-next.org/

使用的版本爲：https://github.com/theme-next/hexo-theme-next

 安裝next主題

git clone https://github.com/theme-next/hexo-theme-next themes/next

 配置hexo的主題爲next

 

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

 

---

next的常用配置

 菜單配置

scheme: Mist

menu:
  home: / || fa fa-home
  about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive
  schedule: /schedule/ || fa fa-calendar
  sitemap: /sitemap.xml || fa fa-sitemap 

---

 側邊欄配置

側邊欄定位 

sidebar:
  # Sidebar Position.
  #position: left
  position: right 

頭像 

avatar:
  # Replace the default image and set the url here.
  url: https://avatar.csdnimg.cn/9/A/7/1_lwqbrell_1572140047.jpg
  # If true, the avatar will be dispalyed in circle.
  rounded: true
  # If true, the avatar will be rotated with the cursor.
  rotated: true 

 

社交

social:
  GitHub: https://github.com/yourname || fab fa-github
  E-Mail: mailto:[email protected] || fa fa-envelope
  Weibo: https://weibo.com/yourname || fab fa-weibo
  Google: https://plus.google.com/yourname || fab fa-google
  Twitter: https://twitter.com/yourname || fab fa-twitter
  FB Page: https://www.facebook.com/yourname || fab fa-facebook
  StackOverflow: https://stackoverflow.com/yourname || fab fa-stack-overflow
  YouTube: https://youtube.com/yourname || fab fa-youtube
  Instagram: https://instagram.com/yourname || fab fa-instagram
  Skype: skype:yourname?call|chat || fab fa-skype 

外鏈 

links:
  Title: http://yoursite.com 

圖片預覽 

# FancyBox is a tool that offers a nice and elegant way to add zooming functionality for images.
# For more information: https://fancyapps.com/fancybox
fancybox: true 

 一鍵複製代碼

codeblock:
  # Manual define the border radius in codeblock
  # Leave it empty for the default 1
  border_radius:
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Show text copy result
    show_result: true