1

前言

网上关于Hexo+Github Pages搭建博客的教程很多,但是参阅很多博文,都是表达不够清晰,绕来绕去。基于此,我想以一个初来者的角度写一篇尽可能靠谱的教程,方便大家快速搭建好。

大致流程

  1. 搭建Node.js环境

  2. 搭建Git环境

  3. 搭建本地Hexo

  4. 将本地Hexo与远程GitHub Pages关联

  5. Hexo的常用操作(持续更新中)


1.搭建Node.js环境

为什么要按照Node.js环境,因为Hexo是基于Node.js编写的。

去Node.js官网:https://nodejs.org/download/r... 下载安装包 v6.11.3
保持默认设置,一路next点击即可安装完成。
然后win+RCMD,输入node -vnpm -v ,出现对应的node的版本号和npm版本号,表明Node.js安装成功!

clipboard.png

2.搭建Git环境

使用Git将本地的Hexo生成的网页代码push到GitHub上。

2.1安装Git bash

Git是一款免费、开源的分布式版本控制系统,用于开发过程中代码版本控制和协作。
在Git官网https://git-for-windows.githu... 下载安装即可。

clipboard.png

安装好后,右击菜单中会有下作图所示的快捷菜单,在命令窗口输入git --version ,显示出对应版本,表面安装成功!
clipboard.png
clipboard.png

2.2 GitHub Pages配置

如果没有Git账户,先注册,网址 https://github.com/
注册好后,新建一个repository(仓库)为Github Pages的仓库
Github Pages仓库命名规范是: yourname.github.io

clipboard.png

2.3用SSH keys关联Hexo与Github Pages

ssh-keygen -t rsa -C "注册Git的邮箱地址"

在回车中会提示你输入一个密码,这个密码会在你提交项目时使用,如果为空的话提交项目时则不用输入,我们按回车不设置密码。

打开 C:\Users\bxm09\.ssh\id_rsa.pub,此文件里面内容为刚才生成的密钥,准确的复制这个文件的内容,粘贴到 https://github.com/settings/sshnew SSH key

可以输入下面的命令,看看设置是否成功,git@github.com的部分不要修改:

ssh -T git@github.com

3.搭建本地Hexo

3.1安装Hexo

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
更多关于Hexo,请点击https://hexo.io/zh-cn/docs/

新建一个文件夹,譬如命名为blog,右击选择Git Bash Here,使用npm安装Hexo,步骤如下:

1  npm install hexo-cli -g
2  hexo init blog
3  cd blog
4  npm install
5  hexo server

此时在浏览器中打开[http://localhost:4000/ 浏览博客了

clipboard.png

  • 执行hexo server提示 FATAL Port 4000 has been used. Try other port instead.,一般是默认的4000端口被占用,那么把hexo server改成任意指定的其他端口即可,如改成4322端口,即hexo server -p 4322

  • 执行hexo server提示找不到该指令,那是因为在Hexo 3.0 后server被单独出来了,需要安装server,安装的命令如下:npm install hexo -server --save


3.2配置Deployment

_config.yml文件中,找到Deployment,然后按照如下修改,用户名改成你的:
注意冒号:后面要空一格

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: git@github.com:yourname/yourname.github.io.git
  branch: master

3.3本地文件提交到Git Pages

// 删除旧的 public 文件
hexo clean
// 生成新的 public 文件
hexo generate
或者
hexo g
// 开始部署
hexo deploye
或者
hexo d

在浏览器中输入 https:/yourname.github.io (用户名改成你的)看到了 Hexo 与 GitHub Pages 已经成功关联了。

若上述操作失败,则需要安装一个扩展: npm install hexo-deployer-git --save

至此,基本博客已经搭建和关联完成。Cheer!!!

clipboard.png


TechCheng
28 声望0 粉丝

talk is cheap , show me code


下一篇 »
vscode配置