hexo + GitHub.io搭建博客

使用hexo搭建自己的博客

hexo概述

需要安装下面两个工具，将会在下面内容介绍如何安装和使用

  • node.js
  • git

hexo是一个快速、简洁且高效的博客框架，它能够将Markdown格式的文档渲染成网页，这样就可以在很短的时间内迅速的创建出网站的静态内容。要想使用hexo来搭建自己的博客，官方文档，强烈建议阅读官方文档来了解hexo，下面只做一个简要的使用说明。

首先得确保计算机上已经安装了node.js环境，是一个能够在服务器端运行JavaScript代码的环境。安装node.js主要是为了使用它的包管理工具npm，所以不需要先系统的学习node.js的知识。

git是版本控制工具。安装git是为了利用版本控制系统克隆代码已经将博客项目托管到三方平台，如果想学习git，最好的资料是官方网站上的Git Pro和《Git权威指南》。

通过官网下载安装好后，可以通过下面的命令来确认node.js版本。

macOS或Linux直接运行来查看版本信息

1
2
node --version
npm --version

windows 需要多加一个cmd和power shell里面切换

1
2
3
node --version
cmd
npm --version

确定git环境和版本。

1
git --version

下面是我的版本信息：

这里建议windows 10用户在应用商店里面下载终端（terminal）应用或VS Code等文本编辑器的终端来配合使用。

接下来通过node.js的包管理工具npm来安装hexo，（windows 10用户需要自行添加环境变量或者直接找到运行node.js tool）来安装hexo。

如果不能科学上网或代理终端的流量，建议先使用淘宝的镜像资源来替代npm的下载源，否则可以跳过这一步。在node.js tool或终端输入代码替换资源。使用了代理的话记得要切换代理协议。例如’set http_proxy=http://127.0.0.1:7890 & set https_proxy=http://127.0.0.1:7890'，这里的是我的代理地址和端口

1
npm config set registry https://registry.npm.taobao.org

接下来就可以通过npm来安转hexo了，命令行如下：

1
npm install -g hexo-cli

安装好后就可以使用hexo来创建自己的博客了。

搭建自己的博客

下面的内容基本都是官方文档，建议直接阅读官方文档

  1. 首先通过一下命令在主目录（user目录)下，该命令就是在克隆GitHub博客项目和默认主题。

    1
    hexo init blog

  2. 可以进入目录文件夹并查看目录结构。

    1
    2
    cd blog
    ls -lR

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    total 4672
    drwxr-xr-x    5 linqun  staff      160 Sep  7 18:52 themes
    drwxr-xr-x    8 linqun  staff      256 Sep 12 23:00 source
    drwxr-xr-x    5 linqun  staff      160 Sep  5 22:21 scaffolds
    drwxr-xr-x   19 linqun  staff      608 Sep 13 05:22 public
    -rw-r--r--    1 linqun  staff      617 Sep 12 22:57 package.json
    -rw-r--r--    1 linqun  staff    62708 Sep 12 22:57 package-lock.json
    drwxr-xr-x  190 linqun  staff     6080 Sep 12 22:57 node_modules
    -rw-r--r--    1 linqun  staff  1280148 Sep 13 05:23 db.json
    -rw-r--r--@   1 linqun  staff     2544 Sep 12 22:57 _config.yml

    说明：Windows环境命令行提示符中可以使用dir命令查看目录结构。需要说明的是：_config.yml是博客项目的配置文件；package.json是项目的依赖项文件；scaffolds保存了Markdown文件的模板，也就是向新添加的Markdown文件中默认填充的内容；source目录下有一个名为_post的目录，我们稍后可以将编写好的Markdown文件放到该目录，这样就可以利用hexo将Markdown文件处理成博客的静态页面，生成的静态页面将置于public目录下；themes文件夹保存了博客使用的主题。

  3. 然后我们通过下面的命令来安装项目所需的依赖项（package.json文件指明了这些依赖项）。

    1
    npm install

    做完上述的操作以后，我们已经可以直接通过下面的命令来生成博客。

    1
    hexo generate

    该命令也可以缩写为：

    1
    hexo g

  4. 之前我们在安装依赖项的时候包括了一个名为hexo-server的依赖项，该依赖项可以帮助我们启动一个基于node.js的服务器来运行我们的博客项目，使用下面的命令即可启动服务器。

    1
    hexo server

    该命令也可以缩写为：

    1
    hexo s
    1
    2
    INFO  Start processing
    INFO  hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

    从运行命令的提示信息可以看到，服务器已经运转起并使用了4000端口，可以通过Ctrl+C来终止服务器的运行。如果要修改服务器使用的端口，可以在启动服务器的时候加上-p参数；如果希望服务器启动后，自动打开默认的浏览器访问服务器，可以使用-o参数，如下所示。

    1
    hexo s -p 8000 -o

  5. 至此，我们已经可以看到hexo在没有配置也没有加入自己的Markdown文件下生成的首页，如下图所示。

修改博客信息和主题

  1. 修改博客的配置文件_config.yml。

    可以直接用文本编辑器来修改，也可以用vim来修改。这就直接用vim来修改了。

    这里就简单修改一下标题、作者、语言、说明就可了，修改主题时会在后面的数据管理新的配置文件立里面合并。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    # hexo Configuration
    ## Docs: https://hexo.io/docs/configuration.html
    ## Source: https://github.com/hexojs/hexo/

    # Site
    title: XXX技术专栏
    subtitle: XXXX
    description:
    keywords:
    author: XXX
    language: zh
    timezone:

    # URL
    ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
    url: 
    root: /
    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:

    下面是YAML文件中相关选项的说明。

    参数 描述
    title 网站的标题
    subtitle 网站的副标题
    description 网站的描述
    keywords 网站的关键词，可以用逗号分隔多个关键词
    author 自己的名字
    language 网站使用的语言
    timezone 网站使用时区，默认使用电脑上设置的时区
    url 网址
    root 网站根目录
    source_dir 资源文件夹，这个文件夹用来存放内容，默认source目录
    public_dir 公共文件夹，这个文件夹用于存放生成的站点文件，默认public目录
    tag_dir 标签文件夹，默认tags目录
    archive_dir 归档文件夹，默认archives目录
    category_dir 分类文件夹，默认categories目录
    auto_spacing 在中文和英文之间加入空格，默认false
    titlecase 把标题转换为首字母大写，默认false
    external_link 在新标签中打开链接，默认true
    relative_link 把链接改为与根目录的相对位址，默认false
    default_category 默认分类
    date_format 日期格式，默认YYYY-MM-DD
    time_format 时间格式，默认HH:mm:ss
    per_page 每页显示的文章数量 ，默认值10，0表示不使用分页
    pagination_dir 分页目录，默认为page目录
    theme 当前主题名称
    deploy 部署部分的设置

  2. 我们将编写好的Markdown文件可以拷贝到blog的source/_posts目录，我们可以在每个Markdown文件的上方添加Front-matter来对文件的布局、标题、分类、标签、发布日期等信息加以说明。所谓Front-matter，就是每个Markdown文件最上方以---分隔的区域，可以在Front-matter中设置以下内容。

    参数 描述 默认值
    layout 布局
    title 标题
    date 建立日期 文件建立日期
    updated 更新日期 文件更新日期
    comments 开启文章的评论功能 true
    tags 标签（不适用于分页）
    categories 分类（不适用于分页）
    permalink 覆盖文章网址

    例如：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    ---
    title: Python编程
    category: Python
    date: 2020-9-12
    ---
    ## Python惯例

    “惯例”这个词指的是“习惯的做法，常规的办法，一贯的做法”，与这个词对应的英文单词叫“idiom”。由于Python跟其他很多编程语言在语法和使用上还是有比较显著的差别，因此作为一个Python开发者如果不能掌握这些惯例，就无法写出“Pythonic”的代码。下面我们总结了一些在Python开发中的惯用的代码。

    1. 让代码既可以被导入又可以被执行。
    if __name__ == '__main__':

    2. 用下面的方式判断逻辑“真”或“假”。
    if x:
    if not x:

  3. 在完成上述工作后，我们可以通过下面的命令先清理之前生成的内容。

    1
    hexo clean

  4. 接下来我们就可以用之前讲过的命令重新生成并运行博客项目。

    1
    2
    hexo generate
    hexo server

    也可以用简写来代替

    1
    2
    hexo g
    hexo s

    然后就可以在提示下的4000端口查看新生成的博客了

将博客托管到GitHub

  • 这里可以选择托管到自己的服务器，不过这样管理服务器和各种维护成本太大，倒不如直接自己直接做一个网站，而且国内环境备案什么的特别麻烦。
  • 其他的平台就不考虑了。

  1. 根据自己的用户名创建一个仓库，仓库一定要取名为“用户名.github.io”。例如：我在GitHub上的用户名是linqun23333，那么我的托管博客项目的仓库一定要命名为linqun23333.github.io，这是为了保证用户名不会重复，后面会讲新的域名解析到这里。

    这里已经创建好了，这里按照提示创建即可

  2. 修改博客项目的配置文件_config.yml，配置使用GitHub来部署该博客项目。

    用vim或文本编辑器改一下配置文件

    1
    vim _config.yml
    1
    2
    3
    4
    5
    6
    7
    # 省略上面的内容
    # Deployment
    ## Docs: https://hexo.io/docs/deployment.html
    deploy:
        type: git
        repo: https://github.com/linqun23333/linqun23333.github.io.git
        branch: master

    上面的配置中，type指定了使用git进行项目部署，repo指定了部署项目的git仓库的URL，我们这里使用的是HTTPS的地址，如果之前配置过密钥对也可以使用SSH的地址，branch指定了将代码同步到仓库中的哪一个分支，通常master分支就是发布项目最终工作成果的分支，也称为项目的主分支。这里可以系统学一下Git以便以后使用GitHub也有帮助。

  3. 安装名为hexo-deployer-git的部署器插件，通过该插件就能实现一键部署。

    1
    npm install hexo-deployer-git --save

  4. 可以使用下面的命令来实现一键部署到GitHub。

    1
    hexo deploy -g

    或者

    1
    hexo generate -d

  5. 接下来在浏览器中输入linqun23333.github.io就能够看到自己的博客，现在全世界的人都可以通过这个URL来访问你的博客。大家是否注意到，访问你博客的这个URL就是刚才我们给仓库起的名字，因为你在GitHub上注册的用户名是独一无二的，所以这个域名也是全世界独一无二的。

将博客绑定到自己的域名

虽然我们已经通过GitHub提供的域名访问到了自己的博客，我们在利用GitHub Pages提供的托管服务同时，也可以将博客绑定到自己专属的域名。如果暂时还没有购买域名，我们可以在提供域名购买服务的网站.

  1. 购买域名

    这里可以选择用腾讯云和阿里云，对应的万网, GoDaddy都可以购买，挑便宜的即可，基本第一年十几块每年，续费就很贵，到时候再换新的域名即可。

    购买域名后需要实名认证，这里都很快，基本上十多分钟就可以通过了

  2. 域名跳转。添加解析服务，让购买的域名(linqun.top)被解析跳转到(https://linqun23333.github.io)中。

    利用阿里云控制台, 或者腾讯云DNSPod来做一个域名解析服务。在域名解析平台登录成功后，可以添加或选择自己的域名来配置域名解析。点击“添加记录”按钮，创建一个类型为CNAME的域名解析，CNAME类型的解析代表将一个域名解析到另一个域名，如下图所示。

    这里的是腾讯云DNSPod控制台，阿里云也一样。

    也可以选择其他比如微软Azure，帮瓦工，谷歌，亚马逊，都比国内大厂的好用得太多了，但是基本上信用卡什么的会比较麻烦，选择也特别多，还可以免费试用一年的服务器搭建高速vps海外节点，这里就先以腾讯云解析服务，其他的先不说明。

  1. 博客CNAME自定义域名文件。在博客项目的source目录下添加一个名为CNAME的文件（请注意这个文件的名字是全大写字母，且没有后缀）。

    同理，用vim或文本编辑器新建文件CNAME

    1
    vim CNAME

    编辑该文件的内容，如下所示。

    1
    linqun.top

    然后按照之前的步骤，清理博客，生成博客，部署博客就可以了。
    顺带一提，CNAME等自定义配置均可以在GitHub Page Setting下找到对应的选项，可以直接在GitHub上检查错漏。

更换一个漂亮的主题

  1. 选择一个主题
  2. 下载主题并解压到blog的theme目录或者hexo升级到module里
  3. 更改博客_config.yml文件，切换主题。
  4. 按照主题的wiki文档来自行配置。

这里我使用的是Fluid主题。

购买DNS加速套餐

这个可以提升加速别人的访问体验

计算机 博客
计算机 博客

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！