利用GitHub Pages搭建Hexo靜態博客教程

時間  2019-11-06
標籤 利用 github pages 搭建 hexo 靜態 博客 教程 欄目 Git 简体版
原文   原文鏈接

利用GitHub Pages搭建Hexo靜態博客教程css

Written By Tomy Stark.
E-mail: ro7enkranz@qq.comhtml

原文連接：apex.linn.top/2019-09-28-…node

Note: 轉載請註明本文出處連接、做者git

什麼是 Hexo

Hexo 是一個快速、簡潔且高效的博客框架。Hexo 使用 Markdown（或其餘渲染引擎）解析文章，在幾秒內，便可利用靚麗的主題生成靜態網頁。github

搭建 Hexo 博客須要什麼

  • Visual Studio Code（用於做爲 Markdown 編輯器，因爲內部集成了終端，很是方便，必備！）
  • Node.js（Node.js 版本需不低於 8.6，建議使用 Node.js 10.0 及以上版本）
  • Git（用於將編譯好的 Hexo 靜態博客文件部署到 GitHub Pages）
  • GitHub 賬號（賬號註冊請自行完成，註冊流程本文不作敘述）

詳細步驟

1. 安裝必要軟件

  • Visual Studio Codeweb

    下載完成後安裝便可，沒有特別須要注意的地方（安裝目錄可本身手動指定）npm

    建議安裝完成後，在 VS Code 中安裝如下擴展插件：json

    • Chinese (Simplified) Language Pack for VS Code
    • changeEncode
    • GBKtoUTF8
    • markdownlint
    • Markdown All in One

  • Node.js瀏覽器

    按照默認設置一直 Next 安裝便可（安裝目錄可本身手動指定）服務器

  • Git

    注意其中一步選擇 VS Code 做爲 Git 的默認編輯器，其它默認（安裝目錄可本身手動指定）

選擇VS Code做爲Git的默認編輯器

2. 註冊 GitHub 賬號

  • 註冊連接：GitHub 賬號註冊（賬號註冊請自行完成，註冊流程本文不作敘述）

    注意：請在註冊完成後驗證郵箱

3. 在 GitHub 上新建倉庫

  • 登陸帳號後，頁面右上角 + 號，選擇 New repository

New repository

  • 若是你但願你的站點能經過 <你的 GitHub 用戶名>.github.io 域名訪問，你的 repository 應該直接命名爲 <你的 GitHub 用戶名>.github.io。例如，個人用戶名爲 SummerFalls，那麼該倉庫名就應該爲 SummerFalls.github.io，詳見下圖：

新建 GitHub 倉庫

  • 新建完成後出現以下圖頁面：

倉庫新建完畢

4. 安裝 Hexo

  • 打開 VS Code，按下 Ctrl + ` 打開內部集成的終端
  • 先測試 Node.js 是否被可以被 VS Code 的終端所調用
    • 在 VS Code 的終端中輸入命令 npm -v
      • 若是正常，則會顯示其版本號，例如 6.9.0
      • 若是異常，則會提示相似錯誤：npm : 沒法將「npm」項識別爲 cmdlet、函數、腳本文件或可運行程序的名稱。請檢查名稱的拼寫，若是包括路徑，請確保路徑正確， 而後再試一次。這時，請關閉 VS Code，而後將其設置爲 以管理員身份運行此程序，以後從新運行 VS Code，如圖所示：

設置 VS Code 管理員權限

  • 定位到你想用於存放博客源文件夾的目錄，我這裏以C盤根目錄爲例

    cd C:\

  • 執行 npm 命令進行全局安裝 Hexo

    npm install hexo-cli -g

  • 初始化 Hexo 博客（此舉會在當前目錄建立名爲 blog 的文件夾）

    hexo init blog

  • 進入 blog 文件夾

    cd blog

  • 經過 blog 目錄下的 package.json 進一步安裝依賴，以後會產生一個 node_modules 文件夾

    npm install

  • 啓動 Hexo 本地服務器

    hexo s

  • 檢查 Hexo 是否安裝成功，在執行上面的命令以後，終端會返回以下信息，按住 Ctrl + 鼠標左鍵單擊 該連接便可打開

    INFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

  • 打開後的頁面如圖，即說明 Hexo 安裝成功

Hexo 初始頁面

  • 回到 VS Code，切換到終端，按下 Ctrl + C，以後輸入 Y 以中止 Hexo 服務器

5. 配置 Hexo

  • VS Code 中按下快捷鍵 Ctrl + K + O，打開你的博客源文件夾，如圖：

打開博客源文件夾

  • 打開左側 側邊欄 中的 _config.yml 文件進行修改，以下所示，請認真閱讀註釋說明：

    # Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: Tomy Stark's Blog                # 你的博客名
subtitle: 四海茫茫                       # 子標題
description: STM32, TI C2000, S32K      # 博客描述，SEO相關
keywords: C, C++                        # 關鍵詞
author: Tomy                            # 博主名字
language: zh-CN                         # 語言，**關係到主題所顯示的語言**
timezone:                               # 時區，默認留空

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: 'https://SummerFalls.github.io' # 域名設置，若是沒有本身的域名，則地址應爲 https://<你的 GitHub 用戶名>.github.io 例如個人爲： https://SummerFalls.github.io
root: /
permalink: :year-:month-:day-:title.html # 建議將永久連接改爲如此
permalink_defaults:

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
enable: true
line_number: true
auto_detect: false
tab_replace:

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
path: ''
per_page: 5                         # 設置主頁中每頁顯示幾篇文章
order_by: -date

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10                        # 設置歸檔(archives)頁面每頁顯示文章數
pagination_dir: page

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape                    # 設置所用的主題，默認爲 landscape

# Deployment
## Docs: https://hexo.io/docs/deployment.html
## repository 以後的連接應爲你以前建立的倉庫的連接，後面跟上 .git 後綴，以下圖，可直接複製倉庫連接
## 類型爲 git
## 分支爲 master
deploy:
type: git
repository: https://github.com/SummerFalls/SummerFalls.github.io.git
branch: master
複製代碼

複製 repository 連接地址

6. 安裝 Hexo 的必備擴展

  • 安裝熱更新支持包

    npm install hexo-browsersync --save

  • 安裝 Hexo Git 支持包，以支持部署 Hexo 博客到 GitHub

    npm install hexo-deployer-git --save

  • 安裝網站地圖生成支持包（根目錄生成 sitemap.xml 方便搜索引擎抓取）

    npm install hexo-generator-sitemap --save

7. 部署 Hexo 博客到 GitHub

  • 生成 Hexo 靜態博客網頁文件

    hexo g

  • 部署 Hexo 博客到 GitHub

    hexo d

    • 第一次執行本命令會彈出登陸框，請登陸你的 GitHub 賬號 如圖所示：

登陸 GitHub 賬號

  • 稍等片刻，待終端命令執行結束後，瀏覽器打開你的博客網頁地址，如圖：

    注意這一次網頁地址爲 _config.yml 文件中 url: 字段後跟隨的網頁地址（實際上就是你的 GitHub Pages 倉庫名），在這裏，個人地址就應該爲：SummerFalls.github.io

部署後的博客

8. [可選] 設置 Hexo 博客域名解析

I. 設置域名解析

在設置自定義域名以前，請自行在域名服務商購買域名

這裏以在阿里雲購買的萬網域名爲例

  • 打開並登陸 阿里雲
  • 點擊網頁右上角的控制檯
  • 找到 雲解析 DNS，如圖所示：

雲解析 DNS

  • 點擊本身購買的域名，進入 解析設置 頁面
  • 點擊 添加記錄 按鈕，設置如圖所示：
    • 記錄類型：CNAME
    • 主機記錄：apex

      這裏你能夠改成本身喜歡的名稱

    • 解析線路：默認
    • 記錄值：summerfalls.github.io

      記錄值改成你的 GitHub Pages 倉庫名稱

    • TTL：10分鐘

解析設置

  • 點擊 肯定，以後解析添加成功

II. 修改 博客根目錄 下的 _config.yml 文件

url: 'https://apex.linn.top'
複製代碼

III. 用 VS Code 在 博客根目錄 下的 source 目錄下新建一個不帶任何後綴名的 CNAME 文件

IV. 修改 CNAME 文件，文件內容爲你的自定義博客網址

apex.linn.top
複製代碼

V. 從新生成並部署 Hexo 博客

  • hexo clean

  • hexo g

  • hexo d

  • 以後便能經過自定義域名訪問博客，如圖所示：

自定義域名訪問博客

9. [可選] 更換 Hexo 博客主題

這裏推薦 Icarus 主題

GitHub 地址：github.com/ppoffice/he…

效果如圖：

Icarus 主題效果

I. 更換步驟

  • 在終端中，確保爲 博客根目錄 的狀況下，輸入如下 git 命令，回車後等待安裝完畢

    git clone github.com/ppoffice/he… themes/icarus

  • 修改 博客根目錄 下的 _config.yml 文件

    theme: icarus
複製代碼

  • 清理以後從新生成並部署 Hexo 博客

    • hexo clean

    • hexo g

    • hexo d

  • 部署完畢後再刷新博客頁面，發現主題更換成功，如圖所示：

主題更換後的效果

II. 修改主題的 _config.yml 文件

在 Icarus 主題的根目錄下，找到 _config.yml 文件，用 VS Code 修改

注意：關於文章末尾的打賞，也在本文件設置，同時須要指定支付寶和微信的收款碼所處的地址，能夠在 source 目錄下新建一個 images 文件夾，在其中存放收款碼圖片，引用圖片的方法以下所示：

# Version of the Icarus theme that is currently used
version: 2.6.0
# Path or URL to the website's icon
favicon: /images/favicon.svg
# Additional HTML meta tags in an array.
meta: 
# Path or URL to RSS atom.xml
rss: 
# Path or URL to the website's logo to be shown on the left of the navigation bar or footer
logo: /images/logo.svg
# Open Graph metadata
# https://hexo.io/docs/helpers.html#open-graph
open_graph:
    # Facebook App ID
    fb_app_id: 
    # Facebook Admin ID
    fb_admins: 
    # Twitter ID
    twitter_id: 
    # Twitter site
    twitter_site: 
    # Google+ profile link
    google_plus: 
# Navigation bar link settings
navbar:
    # Navigation bar menu links
    menu:
        主頁: /
        歸檔: /archives
        分類: /categories
        標籤: /tags
        關於: /about
    # Navigation bar links to be shown on the right
    links:
        # GitHub:
        #     icon: fab fa-github
        #     url: 'https://github.com/SummerFalls'
# Footer section link settings
footer:
    # Links to be shown on the right of the footer section
    links:
        # Creative Commons:
        #     icon: fab fa-creative-commons
        #     url: 'https://creativecommons.org/'
        # Attribution 4.0 International:
        #     icon: fab fa-creative-commons-by
        #     url: 'https://creativecommons.org/licenses/by/4.0/'
        # Download on GitHub:
        #     icon: fab fa-github
        #     url: 'https://github.com/ppoffice/hexo-theme-icarus'
# Article display settings
article:
    # Code highlight settings
    highlight:
        # Code highlight themes
        # https://github.com/highlightjs/highlight.js/tree/master/src/styles
        # https://highlightjs.org/static/demo/
        theme: vs2015
        # Show code copying button
        clipboard: true
        # Default folding status of the code blocks. Can be "", "folded", "unfolded"
        fold: unfolded
    # Whether to show article thumbnail images
    thumbnail: true
    # Whether to show estimate article reading time
    readtime: true
# Search plugin settings
# https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/Search
search:
    # Name of the search plugin
    type: insight
# Comment plugin settings
# https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/Comment
comment:
    # Name of the comment plugin
    type: 
# Donation entries
# https://ppoffice.github.io/hexo-theme-icarus/categories/Donation/
donate:
    -
        # Donation entry name
        type: alipay
        # Qrcode image URL
        qrcode: /images/Alipay.jpg
    -
        # Donation entry name
        type: wechat
        # Qrcode image URL
        qrcode: /images/Wechat.jpg
# Share plugin settings
# https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/Share
share:
    # Share plugin name
    type:
# Sidebar settings.
# Please be noted that a sidebar is only visible when it has at least one widget
sidebar:
    # left sidebar settings
    left:
        # Whether the left sidebar is sticky when page scrolls
        # https://ppoffice.github.io/hexo-theme-icarus/Configuration/Theme/make-a-sidebar-sticky-when-page-scrolls/
        sticky: true
    # right sidebar settings
    right:
        # Whether the right sidebar is sticky when page scrolls
        # https://ppoffice.github.io/hexo-theme-icarus/Configuration/Theme/make-a-sidebar-sticky-when-page-scrolls/
        sticky: true
# Sidebar widget settings
# https://ppoffice.github.io/hexo-theme-icarus/categories/Widgets/
widgets:
    -
        # Widget name
        type: profile
        # Where should the widget be placed, left or right
        position: left
        # Author name to be shown in the profile widget
        author: Tomy Stark
        # Title of the author to be shown in the profile widget
        author_title: 四海茫茫
        # Author's current location to be shown in the profile widget
        location: Earth, Solar System.
        # Path or URL to the avatar to be shown in the profile widget
        avatar: /images/avatar.jpg
        # Email address for the Gravatar to be shown in the profile widget
        gravatar:
        # Whether to show avatar image rounded or square
        avatar_rounded: true
        # Path or URL for the follow button
        follow_link: 'https://github.com/SummerFalls'
        # Links to be shown on the bottom of the profile widget
        social_links:
            Github:
                icon: fab fa-github
                url: 'https://github.com/SummerFalls'
            知乎:
                icon: fab fa-zhihu
                url: 'https://www.zhihu.com/people/TomyStark'
            微博:
                icon: fab fa-weibo
                url: 'https://weibo.com/tomystark'
    -
        # Widget name
        type: toc
        # Where should the widget be placed, left or right
        position: right
    -
        # Widget name
        type: links
        # Where should the widget be placed, left or right
        position: left
        # Links to be shown in the links widget
        links:
            博客 - 吳川斌: 'https://www.mr-wu.cn/'
            博客 - 芯跳不止: 'http://www.mazirong.com/'
            工做室 - Muse Lab: 'https://www.muselab-tech.com/'
            工做室 - 屋脊雀: 'http://www.wujique.com/'
    -
        # Widget name
        type: category
        # Where should the widget be placed, left or right
        position: right
    -
        # Widget name
        type: tagcloud
        # Where should the widget be placed, left or right
        position: right
    -
        # Widget name
        type: recent_posts
        # Where should the widget be placed, left or right
        position: left
    -
        # Widget name
        type: archive
        # Where should the widget be placed, left or right
        position: right
    -
        # Widget name
        type: tag
        # Where should the widget be placed, left or right
        position: right
# Other plugin settings
plugins:
    # Enable page animations
    animejs: true
    # Enable the lightGallery and Justified Gallery plugins
    # https://ppoffice.github.io/hexo-theme-icarus/Plugins/General/gallery-plugin/
    gallery: true
    # Enable the Outdated Browser plugin
    # http://outdatedbrowser.com/
    outdated-browser: false
    # Enable the MathJax plugin
    # https://ppoffice.github.io/hexo-theme-icarus/Plugins/General/mathjax-plugin/
    mathjax: true
    # Show the back to top button on mobile devices
    back-to-top: true
    # Google Analytics plugin settings
    # https://ppoffice.github.io/hexo-theme-icarus/Plugins/General/site-analytics-plugin/#Google-Analytics
    google-analytics:
        # Google Analytics tracking id
        tracking_id: 
    # Baidu Analytics plugin settings
    # https://ppoffice.github.io/hexo-theme-icarus/Plugins/General/site-analytics-plugin/#Baidu-Analytics
    baidu-analytics:
        # Baidu Analytics tracking id
        tracking_id: 
    # Hotjar user feedback plugin
    # https://ppoffice.github.io/hexo-theme-icarus/Plugins/General/site-analytics-plugin/#Hotjar
    hotjar:
        # Hotjar site id
        site_id: 
    # Show a loading progress bar at top of the page
    progressbar: true
    # BuSuanZi site/page view counter
    # https://busuanzi.ibruce.info
    busuanzi: true
# CDN provider settings
# https://ppoffice.github.io/hexo-theme-icarus/Configuration/Theme/speed-up-your-site-with-custom-cdn/
providers:
    # Name or URL of the JavaScript and/or stylesheet CDN provider
    cdn: jsdelivr
    # Name or URL of the webfont CDN provider
    fontcdn: google
    # Name or URL of the webfont Icon CDN provider
    iconcdn: fontawesome
複製代碼
  • 清理以後從新生成並部署 Hexo 博客

    • hexo clean

    • hexo g

    • hexo d

III. 添加自定義 404 Not Found 頁面

  • 在終端中執行如下命令，建立一個 404 的 page 頁面

    hexo new page "404"

  • 用 VS Code 編輯 \source\404\ 目錄下的 index.md 文件

    • 其中字段 "thumbnail: " 後的圖片須要自行存放在對應目錄並改成對應名稱，後綴名稱大小寫敏感

    • 文件內容以下所示（可自定義添加更豐富的內容）

      ---
title: 404 Not Found 該頁面不存在
date: 2019-09-23 15:40:38
thumbnail: /images/IMG_6274.JPG
toc: false
permalink: /404
---

<div style = "text-align: center; margin: auto; width: 100%;">

## **很抱歉，您所訪問的地址並不存在。**

</div>
複製代碼

  • 清理以後從新生成並部署 Hexo 博客

    • hexo clean

    • hexo g

    • hexo d

  • 部署完畢後再次訪問博客，地址後跟上不存在的文章，會自動跳轉到剛剛自定義的 404 頁面，如圖：

404 頁面

IV. 添加關於頁面

  • 在終端中執行如下命令，建立一個 about 的 page 頁面

    hexo new page "about"

  • 用 VS Code 編輯 \source\about\ 目錄下的 index.md 文件

    • 其中字段 "thumbnail: " 後的圖片須要自行存放在對應目錄並改成對應名稱，後綴名稱大小寫敏感

    • 文件內容以下所示（可自定義添加更豐富的內容）

      ---
title: 關於我 About Me
date: 2019-09-19 15:59:10
thumbnail: /images/Car.jpg
---

- <i class="fab fa-fort-awesome-alt"></i> 職業: 複製粘貼工程師
- <i class="fas fa-at"></i> 郵箱: xxxxx@qq.com
- <i class="fab fa-qq"></i> QQ: 123456789
- <i class="fab fa-weixin"></i> WeChat: XXXXXX
- <i class="fab fa-playstation"></i> PSN ID: XXXXXX
- 星座: 天蠍座
- 語言: C/C++/Java/HTML/CSS
- IDE: [VS Code](https://code.visualstudio.com/), [Vivado Design Suite HLx](https://china.xilinx.com/products/design-tools/vivado.html)
- EDA: [Altium Designer](https://www.altium.com.cn/), [EasyEDA](https://lceda.cn/)
- 興趣: 開源硬件, 開源軟件, HiFi, 美食, 音樂
- 遊戲平臺: <i class="fab fa-playstation"></i> Play Station 4, Nintendo Switch
- 運動: 游泳, 騎行
- 正在學習中的: Altium Designer, TouchGFX
複製代碼

  • 清理以後從新生成並部署 Hexo 博客

    • hexo clean

    • hexo g

    • hexo d

  • 部署完畢後再次訪問博客，關於 頁面已經能夠正常訪問，如圖：

關於頁面

V. Icarus 主題小問題修改

  • footer 頁腳高度太高的問題

    用 VS Code 編輯主題目錄下的 style.styl 文件

    路徑：\themes\icarus\source\css\style.styl

    爲文件中的 .footer 類添加一行屬性，以下所示：

    padding-bottom: 3rem
複製代碼

    添加屬性後的 .footer 類以下所示：

    .footer
    background: white
    padding-bottom: 3rem
    .field
        .button
            background: transparent
複製代碼

10. Hexo 模板

\scaffolds 目錄下的 3 個文件分別爲草稿模板、頁面模板、文章模板，修改其內容以在每次新建文章或頁面時，可以自動添加部分模板內容。

  • page.md

    ---
title: {{ title }}
date: {{ date }}
thumbnail: /images/flower.jpg
toc: false
---

複製代碼

  • post.md

    ---
title: {{ title }}
date: {{ date }}
thumbnail: /images/flower.jpg
toc: true
categories:
- uncategorized
tags:
---

<!--more-->

<div style = "text-align: center; margin: auto; width: 100%;">

![Car](../images/Car.jpg)

</div>

複製代碼

11. 寫文章

注意：關於文章圖片，若尚未建立 images 文件夾，能夠在 source 目錄下新建一個 images 文件夾，在其中存放圖片文件。

這裏以建立一篇標題名稱爲 Hello Hexo 的文章爲例：

  • 在終端中執行如下命令，建立一篇文章

    hexo new "Hello Hexo"

  • 用 VS Code 編輯 \source\_posts 目錄下的 Hello-Hexo.md 文件

    • 其中字段 "thumbnail: " 後的圖片須要自行存放在對應目錄並改成對應名稱，後綴名稱大小寫敏感

    • 文件內容以下所示：

      ---
title: Hello-Hexo
date: 2019-09-19 15:59:10
thumbnail: /images/flower.jpg
toc: true
categories:
- Blog
- Hexo
tags:
- Hexo
---

## <i class="fab fa-fort-awesome-alt"></i> 你好 Hexo

正文...

<!--more-->

這裏是在主頁被隱藏的內容...

<div style = "text-align: center; margin: auto; width: 100%;">

![Car](../images/Car.jpg)

</div>

複製代碼

  • 清理以後從新生成並部署 Hexo 博客

    • hexo clean

    • hexo g

    • hexo d

  • 部署完畢後再次訪問博客，剛剛發佈的文章已經出如今主頁上，如圖：

添加新文章

12. 至此全部步驟已完成

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程