HEXO教程 | 创建并上传Github部署静态网页

  1. 1. 准备
    1. 1.1. 1.本地环境
    2. 1.2. 2.注册一个github
  2. 2. 链接Github
    1. 2.1. 1.创建SSH密钥
    2. 2.2. 2.Github添加密钥
    3. 2.3. 3.验证连接是否成功
    4. 2.4. 4.创建仓库
  3. 3. 本地安装HEXO
    1. 3.1. 1.初始化HEXO
    2. 3.2. 2.预览方式
    3. 3.3. 3.上传hexo到GitHub中

准备

访问Github可能需要VPN加速,否则可能无法进入(视网络情况而定)
文章代码中的$在命令窗口中自带,复制的时候记得删掉

1.本地环境

你需要在电脑上安装:
nodejs(>16 版本):
Node.js — Run JavaScript Everywhere
git(2.44.0):Git – Downloads
安装的时候无脑下一步即可。安装完毕以后,可以在 cmd 里面通过:node -v、npm -v 和 git –version 查看安装的版本。正常情况应该有如下输出:

2.注册一个github

在Github注册一个账号(要有邮箱)按照步骤一路下去即可,一定要设置好密码,选择free账号。
这里不过多赘述,因为确实是不麻烦,注意!进入Github有可能需要用到VPN加速,有的时候进入不需要,但访问速度也很慢!

链接Github

在某一个盘里面创建一个文件夹,名字随便写,记得住就好,然后右键点击Open Git Bash Here

会弹出一个命令行界面,我们在里面输入:

1
2
$ git config --global user.name "你的 GitHub 用户名"
$ git config --global user.email "你的 GitHub 邮箱"

1.创建SSH密钥

命令行输入:

1
$ ssh-keygen -t rsa -C "你的 GitHub 邮箱"

然后一路按回车就行。然后我们进入 C:\Users\ 用户名\ .ssh 目录(可能会隐藏,需要显示隐藏项目)

用记事本打开 id_rsa.pub 并复制里面的内容

2.Github添加密钥

进入Github,点击右上角头像,弹出下拉框,点击”Settings”,进入设置点击”SSH and GPG Keys”,再点击”New SHH Key”,打开后Title写自己的Github名字,然后把 id_rsa.pub 里面的内容到复制到 Key 中,点击 “Add SSH key”就可以了

3.验证连接是否成功

在Git bash here命令行输入

1
$ ssh -T git@github.com

出现 “Are you sure……”,输入 yes 回车确认
后面会出现”Hi xxxxx! You’re successfully authenticated……”即表示成功

4.创建仓库

打开 GitHub 的主页点击头像 进入”Your Repositories” 中点击右上角的 New
填写好基本信息
Repository name 自己的用户名.github.io,一定要是这个名字!
Description(optional)写”xxxx的HEXO博客”
勾选 Add a README file
填好后点击 Create repository 创建仓库.
过一小会访问 https://用户名.github.io(而我的就是 lzy134lzy.github.io)可以看到默认界面

本地安装HEXO

在已经创建好的文件夹内,再次点击 Open Git Bash Here打开命令行,然后使用 npm 安装 Hexo。在命令行中输入

1
$ npm install -g hexo-cli

于网络问题,安装时间可能会有点久。这段时间里面界面不会有任何反应,请耐心等待,安装完成后会提示的
若安装成功,可通过

1
$ hexo -version

查看,只有成功了才能查看到

1.初始化HEXO

在创建好的 hexo 文件夹内,打开bash命令行输入:

1
2
$ hexo init  #初始化
$ npm install #安装组件

可能网络问题,初始化的时间可能会有点久,耐心等待即可。当出现
“INFO Start blogging with Hexo!”
提示的时候,说明已经完成了
初始化完毕以后,我们可以在 hexo 程序文件夹中看到 hexo的东西。

2.预览方式

在bash命令行输入:

1
$ hexo g #生成静态页面

稍等一会成功之后在输入

1
$ hexo s #运行本地服务器

如果有提示是否允许专用网络,直接允许就可以。然后我们访问 http://localhost:4000 就可以访问 hexo博客了

PS:如果 4000 端口被占用了(可能),可以运行 hexo server -p 6440 更改端口号为 6440(或者是其他端口)后重试

3.上传hexo到GitHub中

我们需要先安装 hexo-deployer-git

1
$ npm install hexo-deployer-git --save

然后在hexo目录中,修改_config.yml 文件末尾的 Deployment 部分

修改自己的用户名和分支:

1
2
3
4
deploy:
type: git #默认
repo: git@github.com:ly134lzy/lzy134lzy.github.io.git #这个是我自己的,请复制你自己的SSH
branch: gh-pages

说到底其实还是通过 SSH 方式进行连接,SSH地址可以 直接在你的仓库 “<>Code” 里面看到:点击后选择Local->SSH就可以看到一串地址。
修改完成之后保存,再打开bash命令行,输入

1
2
3
$ hexo clean
$ hexo g
$ hexo d

后面如果出现了提示:
“INFO Deploy done: git”(这是最后一段话)
说明网站已经成功上传GitHub了,然后我们只需要在库设置”Default branch”中将分支设置为”gh-pages”(此分支是上面的branch: gh-pages设置的),若不存在就添加一个新的。然后进入pages页面,将”Build and deployment”的branch切换至gh-pages,点击save。稍等片刻我们访问用户名.github.io(比如我是 lzy134lzy.github.io)就可以看到默认 hexo 了