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

时间：2022-01-12 02:16:46

一、前言

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

使用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为执行完此命令后项目所在文件夹名

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

完成后，生成如下文件：

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

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

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

码云设置开启Pages

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

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

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

部署成功后，访问测试 http://zhengqingya.gitee.io/blog/

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

4、本地运行

执行命令：

hexo s -g

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

默认访问端口为4000

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

温馨小提示：如果修改过文件内容，需要通过如下命令清除已经生成的静态文件，重新生成哦！

hexo clean

五、修改主题

觉得Hexo默认主题不好看的，我们也可以去官网找个自己喜欢的主题来修改使用：https://hexo.io/themes/

1、安装新主题，比如这里我选择的是hexo-theme-yilia 

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

下载的新主题会放在themes目录下

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

2、修改配置

①修改项目根目录下的 _config.yml，将theme指定的landscape修改为yilia

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

②项目根目录下执行命令

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搭建个人博客并部署到GitHub或码云上全过程

⑤重新上传到码云上

hexo d

注：这里需要我们去码云仓库上手动更新服务重新部署才能修改上次主题哦！

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

六、写博客

方式一：执行如下命令

hexo new demo  #demo为博客文件名

会生成到 _posts 目录下

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

方式二：直接在 _posts 目录下手动创建markdown文件编写

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

七、总结

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

相关文章