使用Hexo搭建個人博客並部署到GitHub或碼雲上全過程

一、前言

如上圖所示：GitHub有Github Pages，而碼雲也有碼雲 Pages

1、Github Pages或Gitee Pages是什么呢？

Github Pages或者Gitee Pages是一個免費的靜態網頁托管服務，我們可以使用它來托管博客、項目官網等靜態網頁。

之前小編也有寫過關於GitHub搭建個人博客教程，其采用Jekyll模板搭建~
目前碼雲 Pages 支持 Jekyll、Hugo、Hexo編譯靜態資源。

2、Jekyll、Hugo、Hexo 是什么？

溫馨小提示：碼雲上是如下介紹這三者

Jekyll、Hugo、Hexo 是簡單的博客形態的靜態站點生產機器。它有一個模版目錄，其中包含原始文本格式的文檔，通過 Markdown 以及 Liquid 轉化成一個完整的可發布的靜態網站，你可以發布在任何你喜愛的服務器上。Jekyll、Hugo、Hexo 也可以運行在 碼雲（Gitee.com） Pages 上，也就是說，你可以使用碼雲的服務來搭建你的倉庫頁面、博客或者網站，而且是完全免費的。

Jekyll 使用文檔：https://www.jekyll.com.cn/docs/home/

Hugo 使用文檔：https://gohugo.io/documentation/

Hexo 使用文檔：https://hexo.io/docs/

下面小編將介紹使用其中的Hexo來搭建個人博客的全過程~

3、為什么采用Hexo呢？

原因是Hexo基於NodeJS實現，而目前主流的vue前端一般都是使用npm或者yarn來跑項目，因此使用hexo搭建個人博客，易學，且搭建環境相對簡單~

而 Hexo官網 上這樣介紹它:
Hexo是一個快速，簡單和強大的博客框架。您使用Markdown（或其他語言）撰寫帖子，Hexo會在幾秒鍾內生成具有漂亮主題的靜態文件。

二、安裝基本環境

1、Git ： https://git-scm.com/downloads

2、Node.js ： https://nodejs.org/en/

三、安裝Hexo

npm install -g hexo-cli

四、初始化項目 -> 配置 -> 部署到碼雲訪問 -> 本地運行

1、初始化項目

在項目預存位置，cmd或者git bash執行如下命令：

hexo init blog  # 注：blog為執行完此命令后項目所在文件夾名

完成后，生成如下文件：

2、修改站點配置文件 _config.yml

可參考Hexo官網提供文檔進行修改：https://hexo.io/docs/configuration
注：deploy部署需要安裝 hexo-deployer-git

npm install hexo-deployer-git --save

我的修改如下：

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

# Site
title: 鄭清的個人博客
subtitle: zhengqing's blog
description: Hello,here is zhengqing's blog.
keywords:
author: 鄭清
language:
timezone:

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://zhengqingya.gitee.io/blog
root: /blog/
permalink: :year/:month/:day/:title/
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: 10
  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
pagination_dir: page

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

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  #  repo: https://github.com/zhengqingya/zhengqingya.github.io # github倉庫
  repo: https://gitee.com/zhengqingya/blog # 碼雲倉庫
  branch: master
  message:    # 自定義提交消息

3、部署項目到碼雲訪問

執行如下命令生成靜態文件（public文件夾），並提交到碼雲或github遠程倉庫上

hexo d

碼雲設置開啟Pages



部署成功后，訪問測試 http://zhengqingya.gitee.io/blog/

4、本地運行

執行命令：

hexo s -g

默認訪問端口為4000

溫馨小提示：如果修改過文件內容，需要通過如下命令清除已經生成的靜態文件，重新生成哦！

hexo clean

五、修改主題

覺得Hexo默認主題不好看的，我們也可以去官網找個自己喜歡的主題來修改使用：https://hexo.io/themes/

1、安裝新主題，比如這里我選擇的是hexo-theme-yilia

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

下載的新主題會放在themes目錄下

2、修改配置

①修改項目根目錄下的 _config.yml，將theme指定的landscape修改為yilia

②項目根目錄下執行命令

npm i hexo-generator-json-content --save

③在項目根目錄下的 _config.yml 中新增如下內容：

# yilia主題所需新增內容
jsonContent:
  meta: false
  pages: false
  posts:
    title: true
    date: true
    path: true
    text: false
    raw: false
    content: false
    slug: false
    updated: false
    comments: false
    link: false
    permalink: false
    excerpt: false
    categories: false
    tags: true

④最后重新生成靜態文件運行

hexo clean
hexo s -g

⑤重新上傳到碼雲上

hexo d

注：這里需要我們去碼雲倉庫上手動更新服務重新部署才能修改上次主題哦！

六、寫博客

方式一：執行如下命令

hexo new demo  #demo為博客文件名

會生成到 _posts 目錄下

方式二：直接在 _posts 目錄下手動創建markdown文件編寫

七、總結

1. 使用Hexo搭建個人博客可以多參考官方文檔
2. 本地運行時，修改完文件后（除了配置文件一類），可以直接ctrl+s保存，然后刷新頁面即可查看效果，很方便
3. 注意將我們的代碼備份保存哦 ! 小編這里是將博客代碼備份到github上面保存，將生成的靜態文件部署到碼雲上訪問 ~
4. 關於其它功能，比如自定義域名訪問，可直接參考hexo官方文檔，都是非常簡單的操作哦 ~