文章目录
  1. 1. Introduction
  2. 2. Hexo
  3. 3. Github Pages
  4. 4. 博客搭建
  5. 5. Reference

Introduction

基于Hexo搭建的博客用了很多年,最近因为一些原因更新了NodeJs相关导致搭建好的Hexo博客无法正常使用,本章节再次记录从零搭建Hexo在Github上的博客流程,分享和记录Hexo的博客搭建流程。

Hexo

Hexo是快速、簡單且強大的網誌框架 · 超級快速. Node.js 帶給您超級快的檔案產生速度,上百個檔案只需幾秒就能建立完成。

所以Hexo是我们生成博客网页相关的关键之一。

Github Pages

GitHub Pages 是一项静态站点托管服务,它直接从 GitHub 上获取 HTML、CSS 和 JavaScript 文件,通过构建过程运行文件,然后发布网站

可以理解GitHub支持我们不熟静态网页的一个功能,所以Github Pages这是我们上传Github搭建博客的关键之一。

博客搭建

了解了核心的Hexo和Github Pages概念和原理,接下来让我们开始搭建属于我们自己的博客。

  • 安装Node.js

    本人已经安装好了,直接去下载安装Node.js即可

  • 安装Hexo

    打开命令行,输入npm install hexo-cli -g,不识别npm的先去处理npm环境

  • 使用Hexo初始化博客

    打开空目录,然后打开命令行,输入命令:hexo init blog

    HexoBlogInit

  • 生成新博客

    Hexo初始化博客所在目录打开命令行,输入hexo new TestBlog,会看到我们成功生成了一片新博客

    HexoNewBlog

  • 生成博客静态网页

    Hexo初始化博客所在目录打开命令行,输入hexo g,会看到public目录生成了静态网页相关文件

    HexoBlogGenerate

  • 在Github上创建***.github.io的仓库(使用Github Pages服务)

    详情参考Github Pages

  • 配置Hexo博客发布到Github的***.github.io仓库

    打开Hexo初始化博客所在目录的_config.yml文件,将发布相关配置修改成如下:

    1
    2
    3
    4
    5
    6
    # Deployment
    ## Docs: https://hexo.io/docs/one-command-deployment
    deploy:
    type: git
    repo: 这里填上面Github生成的博客仓库.github.io
    branch: master
  • 发布博客到***.github.io仓库

    Hexo初始化博客所在目录打开命令行,输入hexo d,会发现提示不是被的Deployer not found:git

    HexoDeployGitError

    这里我们需要安装git相关的hexo部署插件

    注意repo填写的仓库地址要SSH而非HTTPS的地址

  • 安装Hexo git部署插件

    Hexo初始化博客所在目录打开命令行,输入npm install hexo-deployer-git –save

    让后再次输入hexo d我们就会看到部署提示我们输入Github的密码

    HexoDeployEnterPassword

    输入完成后回车即可完成博客上传部署。

  • 默认Hexo的博客主题很简陋,这里我们需要去下一个喜欢的主题

    Hexo Themes

    这里我下载了一个叫jacman的主题:

    jacman

    下载完成后,我们需要在_config.yml文件里配置theme使用刚下的主题

    1
    2
    3
    4
    # Extensions
    ## Plugins: https://hexo.io/plugins/
    ## Themes: https://hexo.io/themes/
    theme: jacman

    下载的主题文件放在themes文件夹下

  • 如果想本地测试查看博客效果

    Hexo初始化博客所在目录打开命令行,输入hexo server,然后在网页输入localhost:4000即可查看本地效果

    HexoLocalServerPreview

  • 关于博客的一些名字修改,自己打开_config.yml修改对应地方即可

    配置说明详细参考:configuration

Note:

  1. 关于Git的配置上述略过了
  2. 博客编写的图片路径要放在当前使用主题下的source目录

Reference

Github+Hexo搭建个人网站详细教程

文章目录
  1. 1. Introduction
  2. 2. Hexo
  3. 3. Github Pages
  4. 4. 博客搭建
  5. 5. Reference