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

1、前言

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

一、Github Pages或Gitee Pages是什麼呢？

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

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

二、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來搭建我的博客的全過程~

三、爲何採用Hexo呢？

緣由是Hexo基於NodeJS實現，而目前主流的vue前端通常都是使用npm或者yarn來跑項目，所以使用hexo搭建我的博客，易學，且搭建環境相對簡單~

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

2、安裝基本環境

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

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

3、安裝Hexo

npm install -g hexo-cli

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

一、初始化項目

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

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

完成後，生成以下文件：

二、修改站點配置文件 _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:    # 自定義提交消息

三、部署項目到碼雲訪問

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

hexo d

碼雲設置開啓Pages 部署成功後，訪問測試 http://zhengqingya.gitee.io/blog/

四、本地運行

執行命令：

hexo s -g

默認訪問端口爲4000

舒適小提示：若是修改過文件內容，須要經過以下命令清除已經生成的靜態文件，從新生成哦！

hexo clean

5、修改主題

以爲Hexo默認主題很差看的，咱們也能夠去官網找個本身喜歡的主題來修改使用：https://hexo.io/themes/

一、安裝新主題，好比這裏我選擇的是hexo-theme-yilia

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

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

二、修改配置

①修改項目根目錄下的 _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

注：這裏須要咱們去碼雲倉庫上手動更新服務從新部署才能修改上次主題哦！

6、寫博客

方式一：執行以下命令

hexo new demo  #demo爲博客文件名

會生成到 _posts 目錄下

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

7、總結

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