TechRepo是由软件学院学生科协推出的技术分享系列推送,每两周会进行一次更新,旨在为同学们提供一个分享技术、学习技术、传承技术的平台。欢迎感兴趣的同学关注我们,也欢迎有意向分享技术的同学联系我们(tech@ssast.org)了解投稿事宜。
引言
平时想记录自己的学习历程,做题思路,便想建一个个人博客;网上已有的 blog 网站显得不够个性化,当然想建立一个个人网站,最好再有个个性域名,但是又没有足够的前后端知识。没关系,Hexo + GitHub Pages,可以零成本建立一个美观的 blog。

目录


一、准备
二、撰写文章
三、创建页面
四、推送网站
五、F.A.Q
1
准备
1、GitHub
2、Git
*3、Node.js
*4、Hexo
已有 GitHub 账号并已经设置好本机 Git 的可以直接跳到第 3 步,记得新建一个 repository 即可。
1、GitHub&GitHub Pages
GitHub 是以 Git 为唯一版本控制工具的项目托管平台。GitHub Pages 是由 GitHub 提供的免费项目网站服务,也可以用来搭建个人博客。
在https://github.com/注册 GitHub 账户,记下自己注册用的邮箱及用户名。注册好后点击 New Repository 建立一个新仓库,仓库名输入用户名.github.io,方便后续的推送操作。
2、Git
Git 下载地址:https://git-scm.com/
Linux 用户可使用包管理器(apt/yum/...)安装 Git。
Windows 用户安装时可选中 Git from the command line and also from 3rd-party software,这样安装后可在 cmd 中使用 Git 命令。(否则只能在 Git Bash 中使用 Git)
安装后,在终端中输入:git --version 查看安装是否成功(如果显示版本号即为安装成功;若命令行提示 not found 则安装失败。)
安装成功后设置本机 Git 与 GitHub 账户,在终端依次输入:
git config --global user.name "你的 GitHub 用户名"
git config --global user.email "你的 GitHub 注册邮箱"
ssh-keygen -t rsa -C "你的 GitHub 注册邮箱"
然后连续三次回车,找到生成的 .ssh 文件夹中的 id_rsa.pub文件,将其内容全部复制,进入 https://github.com/settings/keys,点击New SSH key,粘贴,Add。随后在终端输入
ssh git@github.com
检查是否成功绑定。
3、Node.js
下载 Node.js (https://nodejs.org/)或使用包管理器安装。
安装结束后在终端输入
node -v
npm -v
检查是否安装成功。
4、Hexo
在本机建一个文件夹,用于存放网站相关文件,命名任意,在终端里 cd 进入该文件夹,输入npm install -g hexo-cli 安装 Hexo。
安装成功后输入:hexo init 初始化博客。这一步完成后当前文件夹中会产生 Hexo 所需的基本文件结构。接下来输入:
hexo g
hexo s
hexo g 表示生成博客的全部站点文件,结束后会在博客的 public 目录中看到博客网站的完整文件结构;
hexo s 表示在本地启动预览服务器。用浏览器访问 localhost:4000,应该能看到 Hexo 安装完毕产生的默认站点,包括一篇文章和一个页面。预览结束后按 Ctrl+C (Control+C) 停止本地服务器。
2
撰写文章

在终端中输入:
hexo new test
可以创建一篇名为 test(建议不要包含中文、空格及特殊符号)的文章。在 source/_posts 目录下会看到多了一个名为 test.md 的文件。接下来就可以用任意一种 Markdown 编辑器编辑这篇文章。(附:Markdown 语法(中文);GitHub Flavored Markdown)
文章的 Markdown 文件顶部有若干文档信息,如下:
title: 文章的标题,可以使用中文、空格或特殊符号等
date: 文章发表的时间
tags: 文章标签
category: 文章分类
若要删除一篇文章,删除对应的 Markdown 文件即可。

3
创建页面
页面一般用来放一些不适合写在文章中的内容,如个人介绍、友情链接等。在终端中输入: hexo new page test 可以创建一个名称为 test(建议不要包含中文、空格及特殊符号)的页面。页面文件被单独放在 source/test 文件夹中,其中 index.md 文件是页面的内容。编辑方法与文章一样。 | |||
4
推送网站
为了使博客能被其他人访问,我们需要通过 GitHub 推送。
打开博客根目录下 _config.yml 配置文件,翻到底部修改为:
deploy:
type: git
repo: 这里填入你之前在 GitHub 上创建仓库的完整路径(在 GitHub 上打开你的仓库,找到 Clone or download 按钮,复制其中的链接粘贴于此)
branch: master
此处需要注意格式(使用 2 空格缩进、冒号后面一个空格),保存。这个步骤告诉 Hexo 应当把网站推送到哪里。随后在终端输入:
npm install hexo-deployer-git --save
安装部署到 Git 的 Hexo 插件。再在终端依次输入:
hexo g
hexo d
其中 hexo d 为部署本地的网站到仓库,此时打开浏览器输入仓库的名称(xxxx.github.io),就能访问我们的网站了。
至此,搭建博客的基本工作就已经完成了。
5
F.A.Q
1、我想换掉默认网址 xxxx.github.io 首先需要注册一个域名,然后将域名绑定 CNAME 记录解析到 xxxx.github.io。接着在 GitHub 上进入你的仓库,在 Settings 中找到 GitHub Pages 板块. 在 Custom domain 中输入你的域名,点击 Save 完成设置。选中 Enforce HTTPS 会强制启用 HTTPS 安全连接(可选)。 接下来,打开博客根目录的 _config.yml 配置文件,找到 url: 这一行,改成 url: 你的域名(视情况加上 http:// 或 https://),然后重新生成站点即可。 | |
2、感觉默认主题不太好看 Hexo 网站(https://hexo.io/themes/)上有许多主题可供选择。点击其中的图片,可打开使用该主题的网站以预览效果。文字链接会跳转到主题的 GitHub 仓库地址。假设主题名称是 test,那么下载主题后,把主题文件解压到 themes/test 目录下;之后打开博客根目录的 _config.yml 文件,找到其中 themes: landscape 这一行,改为 themes: test,即可切换到 test 主题。之后需要重新生成站点。 | |
3、生成的站点跟上次一样/文件没有更新 需要清除缓存,在终端中输入: hexo clean 然后再试一次。 | |
4、不想直接发表草稿 把相应文章的 Markdown 文件移到 source/_drafts 目录(如果没有就创建一个)下,生成时就会自动忽略。 | |
5、重新部署网站后自定义域名挂了 在 source 文件夹下创建一个名为 CNAME(无后缀名)的文本文件,在其中输入你的域名并保存。回到 GitHub 重新设置域名、生成并部署站点即可。 6、我还有其他问题 请参考 Hexo 文档(https://hexo.io/docs/)。 |
文案:技术部
排版:蔡韫睿
审核:骆炳君