乐趣区

使用Hexo搭建个人博客并部署到GitHub或码云上访问全过程

jiezi

一、前言



如上图所示：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 文件编写

七、总结

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