Github Pages 搭建HEXO主题个人博客

时间：2023-03-14 23:15:31

跌跌撞撞，总算是建立起来了。回首走过的这么多坑，也真的是蛮不容易的。那么就写点东西，记录我是怎么搭建的吧。

准备工作

  • 安装Node.js: 用于生成静态页面，我们需要到官网上去下载即可。http://nodejs.org

  • 安装Git：作用就是把本地的hexo内容commit到我们的远程仓库，实现更新操作https://git-scm.com/download/

  • 申请GitHub账号：用来盛装我们的代码，这样才能够被访问，程序员如果没有这个账号，那我就不说什么了。

    SSH Keys，看你自己了，可以不配制，不配置的话以后每次对自己的博客有改动提交的时候就要手动输入账号密码，配置了就不需要了。至于怎么配置，网上的资源很多。

安装HEXO

进行到这一步的前提是你已经安装好了Node.js和Git了，不然接下来的你是没办法进行下去的。

随便找一个文件夹，然后右键使用gitbash打开：

npm install -g hexo // 即使用npm命令进行全局安装hexo

然后就是对这个文件夹进行初始化的操作：

hexo init

进行到这一步，基本上全部的安装工作也算是完成了。这个hexo init的文件夹，就是你的项目的根目录咯。

撰写博客

经过了刚才的那些繁琐的安装流程，接下来的就轻松了。我们只需要使用几个有限的命令，就可以生成页面精美的博客了。

首先还是浏览一下常用的命令吧：

  • hexo new “postName” #新建文章
  • hexo new page “pageName” #新建页面
  • hexo generate #生成静态页面至public目录
  • hexo server #开启预览访问端口（默认端口4000，’ctrl + c’关闭server）
  • hexo deploy #将.deploy目录部署到GitHub
  • hexo help # 查看帮助
  • hexo version #查看Hexo的版本

然后我们就正式开始吧，使用hexo new “BlogName” 就可以创建一个新的.md文件（markdown文件,大家可以参考我之前的这篇文章。Markdown 入门与提高。

然后，我们可以进入到source文件夹下，通过查找就可以找到了。我们可以随意的使用任何的文本编辑器编写markdown类型的博客内容。写完之后，保存即可。

最后在git bash中使用

hexo generate // 生成html类型的博文

这样，我们的编辑工作就完成了。

部署博客到GitHub

我们可以手动的使用浏览器的方式进行upload文件，但是每次都要很繁琐的进行一系列的操作，我不太喜欢这种方式。所以我仍旧是用命令行来完成提交。

当然了，我们要想使用git命令，得有一点git的基础才行。大家仍旧可以参考我之前的文章：

GitHub 如何提交代码，即问题汇总

Git客户端及常用的Git命令

然后最最重要的就是配置根目录下面的_config.yml文件了，具体的大家可以参考我的这个，有人可以到网上搜索一下。

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: 博客主标题
subtitle: 人生的乐趣不止编程，但没有编程，一定不快乐！
description: 记录进步的点点滴滴
author: 你的名字
language: default
email: 你的邮箱
timezone: Asia/Hong_Kong

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

# 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
  repository: git@github.com:你的GitHub账号/你的GitHub账号.github.io.git
  branch: master

接下来就可以部署我们已经编写好的博客内容了。

总的来说需要三个命令：

hexo clean // 清理文件

hexo generate  // 生成目标的html

hexo deploy  //  发布

我遇到的问题

我遇到的问题比较的奇葩，我的配置文件明明是正确的，我也检查了好几遍，但是每次deploy的时候，它总会将我的项目文件全部的上传到我的GitHub仓库。导致我访问我的io账号的时候出现404错误。

我的解决办法：

我每次完成编写，生成html之后。不会使用hexo deploy命令。

而是手动的在我的public文件夹下：

git add .
git commit -m 'update'
git remote add origin git@github.com:yourAccount/yourAccount.github.io.git
git push -u origin master -f

这样强制性的提交代码，就不会出现404错误了。

总结

搭建Github Pages的这个流程说起来复杂，但是完成后看起来也不复杂。可能就在于对一个新知识的接受需要一个过渡吧。未知的总是充满着晦涩难懂的概念。

不过，跌跌撞撞。总算是完成了，接下来的任务就是更换主题，添加sitemap,以及添加评论功能了。大家可以参考下面的这篇好文

搭建HEXO静态博客

HEXO主题选择

相关文章