使用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/doc...

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/configur...
注：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/b...

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文件编写

在这里插入图片描述

七、总结

使用Hexo搭建个人博客可以多参考官方文档
本地运行时，修改完文件后（除了配置文件一类），可以直接ctrl+s保存，然后刷新页面即可查看效果，很方便
注意将我们的代码备份保存哦 ! 小编这里是将博客代码备份到github上面保存，将生成的静态文件部署到码云上访问 ~
关于其它功能，比如自定义域名访问，可直接参考hexo官方文档，都是非常简单的操作哦 ~