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

古城微笑少年丶 2021-12-14 04:27 72阅读 0赞

### 一、前言 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][20190707224346373.png]  
如上图所示：GitHub有Github Pages，而码云也有码云 Pages

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

Github Pages或者Gitee Pages是一个免费的静态网页托管服务，我们可以使用它来托管博客、项目官网等静态网页。

之前小编也有写过关于[**GitHub搭建个人博客教程**][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/][https_www.jekyll.com.cn_docs_home] ######

###### Hugo 使用文档：[https://gohugo.io/documentation/][https_gohugo.io_documentation] ######

###### Hexo 使用文档：[https://hexo.io/docs/][https_hexo.io_docs] ######

下面小编将介绍使用其中的Hexo来搭建个人博客的全过程~

#### 3、为什么采用Hexo呢？ ####

原因是Hexo基于NodeJS实现，而目前主流的vue前端一般都是使用npm或者yarn来跑项目，因此使用hexo搭建个人博客，易学，且搭建环境相对简单~

> 而 [**Hexo官网**][https_hexo.io_docs] 上这样介绍它:  
> Hexo是一个快速，简单和强大的博客框架。您使用Markdown（或其他语言）撰写帖子，Hexo会在几秒钟内生成具有漂亮主题的静态文件。

### 二、安装基本环境 ###

###### 1、Git ： [https://git-scm.com/downloads][https_git-scm.com_downloads] ######

###### 2、Node.js ： [https://nodejs.org/en/][https_nodejs.org_en] ######

### 三、安装Hexo ###

npm install -g hexo-cli

### 四、初始化项目 -> 配置 -> 部署到码云访问 -> 本地运行 ###

#### 1、初始化项目 ####

在项目预存位置，cmd或者git bash执行如下命令：

hexo init blog  # 注：blog为执行完此命令后项目所在文件夹名

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4_size_16_color_FFFFFF_t_70 1]  
完成后，生成如下文件：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4_size_16_color_FFFFFF_t_70 2]

#### 2、修改站点配置文件 \_config.yml ####

> 可参考Hexo官网提供文档进行修改：[https://hexo.io/docs/configuration][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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4_size_16_color_FFFFFF_t_70 3]  
码云设置开启Pages  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4_size_16_color_FFFFFF_t_70 5]  
![在这里插入图片描述][20190708000440139.png]  
部署成功后，访问测试 [http://zhengqingya.gitee.io/blog/][http_zhengqingya.gitee.io_blog]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4_size_16_color_FFFFFF_t_70 6]

#### 4、本地运行 ####

执行命令：

hexo s -g

![在这里插入图片描述][20190708001021425.png]  
默认访问端口为4000  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4_size_16_color_FFFFFF_t_70 7]

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

### 五、修改主题 ###

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

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

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

下载的新主题会放在themes目录下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4_size_16_color_FFFFFF_t_70 8]

#### 2、修改配置 ####

①修改项目根目录下的 **\_config.yml**，将theme指定的**landscape**修改为**yilia**  
![在这里插入图片描述][20190708002713254.png]  
②项目根目录下执行命令

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4_size_16_color_FFFFFF_t_70 9]  
⑤重新上传到码云上

hexo d

**注**：这里需要我们去码云仓库上手动更新服务重新部署才能修改上次主题哦！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4_size_16_color_FFFFFF_t_70 10]

### 六、写博客 ###

#### 方式一：执行如下命令 ####

hexo new demo  #demo为博客文件名

会生成到 **\_posts** 目录下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4_size_16_color_FFFFFF_t_70 11]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4_size_16_color_FFFFFF_t_70 12]

### 七、总结 ###

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4_size_16_color_FFFFFF_t_70]: /images/20211213/b79577ca3d36480890872e665028857b.png
[20190707224346373.png]: /images/20211213/e95aaec6474046cd939c8c38033141c2.png
[GitHub]: https://blog.csdn.net/qq_38225558/article/details/90765491
[Gitee.com]: http://Gitee.com
[https_www.jekyll.com.cn_docs_home]: https://www.jekyll.com.cn/docs/home/
[https_gohugo.io_documentation]: https://gohugo.io/documentation/
[https_hexo.io_docs]: https://hexo.io/docs/
[https_git-scm.com_downloads]: https://git-scm.com/downloads
[https_nodejs.org_en]: https://nodejs.org/en/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4_size_16_color_FFFFFF_t_70 1]: /images/20211213/5644f73b509b43e0a00d524cb685e03e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4_size_16_color_FFFFFF_t_70 2]: /images/20211213/e0823d4a98b64734a09b752f91b4d4bb.png
[https_hexo.io_docs_configuration]: https://hexo.io/docs/configuration
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4_size_16_color_FFFFFF_t_70 3]: /images/20211213/47f8ede9b1cb4ca081bdb48a4316244a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4_size_16_color_FFFFFF_t_70 4]: /images/20211213/0f537a9bcf0241a3b20d9e745bd87b92.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4_size_16_color_FFFFFF_t_70 5]: /images/20211213/b4d79b6787504d3fba6e7ad59eabc532.png
[20190708000440139.png]: /images/20211213/3ac90d4f30cc46ee86be6d5f032eb78d.png
[http_zhengqingya.gitee.io_blog]: http://zhengqingya.gitee.io/blog/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4_size_16_color_FFFFFF_t_70 6]: /images/20211213/c12aa8ad800c4fc4b3381adb0b3efa42.png
[20190708001021425.png]: /images/20211213/236f1a33c02c4c108385274dfb9b9091.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4_size_16_color_FFFFFF_t_70 7]: /images/20211213/b2a3d1135d034d94968a8792433fbe87.png
[https_hexo.io_themes]: https://hexo.io/themes/
[hexo-theme-yilia]: http://litten.me/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4_size_16_color_FFFFFF_t_70 8]: /images/20211213/919b73deaf0f42dcad5b5a1bd6499583.png
[20190708002713254.png]: /images/20211213/4a8f6aaf9ec2477f937f1f3182f2ac43.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4_size_16_color_FFFFFF_t_70 9]: /images/20211213/0082915c492049dbaf4840bd6a52d76b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4_size_16_color_FFFFFF_t_70 10]: /images/20211213/ce68acb706bc4043a155321cdb2ecee1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4_size_16_color_FFFFFF_t_70 11]: /images/20211213/b84fc5b299cd495a8b71389536ba4b47.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4_size_16_color_FFFFFF_t_70 12]: /images/20211213/2d3f824e241a4c618b931a53bef1a649.png