hexo搭建个人博客

发表于 更新于 分类于 阅读次数： Waline：

使用 Hexo 框架来搭建个人网站

这两天我重新整理了一下自己的 Blog ，将原来使用WordPress的博客重新改成了使用Hexo。那么接下来就说说如何从 0 开始使用 Hexo 搭建个人博客吧。

安装nodejs

因为 hexo 是基于 node 框架的，所以呢，我们首先需要下载安装node：下载地址

安装完之后，我们打开命令窗口，输入 node -v ，检查是否安装成功。如果是windows系统，可以先重启下再试试，环境变量的添加需要重启才能生效。

安装Hexo

  1. 安装成功后，我们在命令行窗口运行如下命令来安装 hexo：

    npm install hexo-cli -g

  2. 初始化博客目录：

    hexo init xxx.github.io (这里的xxx换成你自己的英文名)

  3. 初始化完成后，我们就进入我们的目录：

    cd xxx.github.io

  4. 安装

    npm install

  5. clean一下，然后生成静态页面

    hexo clean
    hexo g

    g 就是generate ,生成的意思

  6. 把你的网站运行起来

    hexo s

    s 就是server ，在服务上运行的意思

  7. 打开你的浏览器，输入 localhost:4000 。自此，你的个人网站就这么速度的搭建起来了！

更改配置与主题

  1. 进入你的网站目录，打开 _config 文件，这个文件是用来配置你的网站信息的。
    这里列出我的简单配置，具体可以看这个Hexo配置文档

    # Site
    title: 朱鱼鱼的小本本
    subtitle: '我好快乐，因为我是小熊软糖，小熊软糖~'
    description: '哼~'
    keywords: 
    author: zuicy
    language: zh-CN
    timezone: 'Hongkong'

  2. 下载主题，我这里使用的是next主题的v8.11.1

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

  3. 配置主题

    主题下载完之后，在你根目录下的 _config.yml 文件中，修改 theme 为你的主题名字：

    theme: next

  4. 重新生成和运行

    hexo g
    hexo s

    访问一下看看，是不是比之前好看多了？

新建博文

有两种方式来新建你的博文

  1. 命令形式

    在你的 blog 目录下使用如下命令：

    hexo new article （这里的article写上你的文章的名称）

    输入这样的命令之后你的 source/_posts 下就会生成一个 article.md 文件，在这个文件下就可以写上你的博客内容了。

  2. 直接新建方式

    直接点的方式就是直接在source/_posts新建一个 Markdown 文件，其实和命令形式是一个道理，只不过命令形式用了命令来创建。同时这个方式注意自己加上标题等内容

增加标签与归档分类

增加标签和归档分类，能让你的文章方便检索。

  1. 打开next主题配置

    在themes\next\_config.yml这个路径的配置文件下找到menu配置，机器中的tags和categories的注释去掉

    menu:
      home: / || fa fa-home
      # about: /about/ || fa fa-user
      tags: /tags/ || fa fa-tags
      categories: /categories/ || fa fa-th
      # archives: /archives/ || fa fa-archive
      # schedule: /schedule/ || fa fa-calendar
      # sitemap: /sitemap.xml || fa fa-sitemap
      # commonweal: /404/ || fa fa-heartbeat

  2. hexo打开标签和归档分类：

    hexo new page categories
    hexo new page tags

  3. 修改默认文件

    执行完成之后会新生成source/tags/index.md和source\categories\index.md两个文件

    首先打开source/tags/index.md，其默认内容应该为

    ---
    title: 标签
    date: 2021-01-25 22:54:58
    ---

    改为

    ---
    title: 标签
    date: 2021-01-25 22:54:58
    type: "tags"
    ---

    然后打开source\categories\index.md，其默认内容应该为

    ---
    title: 文章分类
    date: 2021-01-25 22:37:25
    ---

    改为

    ---
    title: 文章分类
    date: 2021-01-25 22:37:25
    type: "categories"
    ---

  4. 给文章设置标签和分类归档属性

    首先打开需要添加标签的文章，在文章开头添加上以下文案，就设置好标签里了

    ---
    tags:
        - Tag1
        - Tag2
        - Tag3
    categories:
        - 分类1
        - 分类2
    ---

  5. 重新生成下静态文件运行，就能看到效果啦

让你的博客全世界都能看到

部署到GitHub Pages

已经搞定了个人blog，接下来当然是要部署到网上让人家访问啦，使用GitHub Pages，就可以免费让别人访问到自己个博客了。

  1. 创建 Github pages 仓库

    首先创建一个 xxx.github.io 的 public 仓库，这里的xxx写你的名字，比如我写的是 wistbean.github.io，那么到时我就可以通过 wistbean.github.io 来访问我的网站了。

  2. 安装 hexo-deployer-git

    在你的博客目录下输入如下命令，这样你在本地写的文章才能 push 到 GitHub 上面去。

    npm install hexo-deployer-git --save

    配置你的Git
    打开你的配置文件，然后输入你的 git 地址：

    deploy:
        type: git
        repo: https://github.com/xxx/xxxx.github.io.git

  3. 推送你的网站到Github上

    直接输入命令

    hexo d

    d 就是 deploy ， 部署上去的意思。

  4. 访问你的网站

    这样push上去之后，你就可以直接在浏览器输入你的 xxx.github.io 就可以访问啦！

更改域名

当然如果你有自己的域名，或者觉得github.io太臃肿的话，那么就需要更改你的域名了。

  1. 添加 CNAME 文件

    在你的博客的 sources 目录下新建一个 CNAME 文件（文件名要大写），这个文件里面就写你的域名就可以了，比如：www.xxxx.com。 接着将文件push到你的 GitHub上，可以使用 hexo d 命令。

  2. 增加DNS解析

    在你的域名商后台增加一个CNAME类型的解析：

    主机记录：www
    记录类型：CNAME
    记录值：xxx.github.io  (这里就是你的github仓库名称)

  3. GitHub 设置域名

    在你的 GitHub 设置域名，在你的 GitHub 博客项目中点击 Settings，在 GitHub Pages 下的 Custom domain 写上你的域名，然后 save。理论上这一步github会自动解析第一步提交的，如果没有变可以手动改。在这个下面还有一个开关，可以让网站强制使用https打开，建议开上。

    这里不推荐将xxx.com这样的一级域名路由了，根据github的说法，这样子别人也可以使用你的https证书来访问github的网站。

添加评论功能

Hexo: Next 主题使用 Waline 评论系统

添加搜索功能

Hexo:next主题使用Algolia增加搜索功能