写在前面

这篇文章是为那些伸手党和小白准备的,所以一切步骤都尽可能的简化。

准备

首先,我们需要注册一个Github账户。在注册页面输入Username(唯一用户名),Email(你的邮箱)和Password(密码),然后直接选择Free账户,填写资料(可选)并按照要求点击邮件里的链接进行验证。

恭喜,你注册了一个Github账户!

接下来创建一个新仓库,在Repository name处填写用户名.github.io(如charlie-zzy.github.io),勾选Initialize this repository with a README,不用管别的选项,直接确定即可。


下载node.jsVScodeGit并安装。

恭喜,你安装了node.js运行环境!

恭喜,你安装了VScode代码编辑器!

恭喜,你安装了Git包管理器!

在电脑里新建一个文件夹用于存放博客文件(建议路径短一点)。

同时按Win+R打开运行窗口,输入powershell并回车打开终端,在终端中输入cd 目录并回车进行切换目录(如cd D:/blog/) ,此时可以看到左侧的目录变成了你需要的目录,依次一行一行输入以下命令(并换行)进行安装。

1
2
3
4
5
6
npm install -g hexo-cli
hexo init
npm install
npm install hexo-deployer-git --save
git clone https://github.com/xaoxuu/hexo-theme-volantis themes/volantis
npm i -S hexo-generator-search hexo-generator-json-content hexo-renderer-stylus

恭喜,你安装了Hexo博客引擎!

恭喜,你安装了Volantis博客主题!

写作

当安装完成时,可以发现目录变成这样了:

1
2
3
4
5
6
7
8
9
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes
└── volantis

这些文件的意思:

  • _config.yml网站的配置信息,您可以在此配置大部分的参数。
  • _posts文件夹存放文章,你可以在这里编辑以Markdown格式存放的文章。
  • volantis文件夹存放主题文件,里面也有一个_config.yml主题配置信息

输入以下命令可以新建文章,然后在_posts目录找到这个文件使用VScode打开。

1
hexo new 文章名

恭喜,你新建了一篇文章!

在VScode中,点击页面右上角书与放大镜按钮可以实时预览最终的样子,参考这篇帮助可以了解Markdown的语法。

当你写完并参考Volantis主题文档Hexo文档修改了自己喜欢的配置后,就可以发布了。

发布

  • 运行hexo clean清除缓存
  • 运行hexo g生成文件
  • 运行hexo s开启本地预览(Ctrl+C退出)

打开浏览器,输入localhost:4000,你就会看到自己的博客。

恭喜,你做好了博客!

然而现在的博客只能在自己的电脑上预览,该如何部署到网站上呢?

上传

输入以下命令,将尖括号中的用户名和邮箱(包括尖括号)替换为自己的并输入进刚才那个终端。

1
2
3
git config --global user.name "<Github注册的用户名>"
git config --global user.email <Github注册的邮箱>
ssh-keygen -t rsa

例:

1
2
3
git config --global user.name "charlie-zzy"
git config --global user.email neycbs@outlook.com
ssh-keygen -t rsa

在输出的Your public key has been saved in 什么的后面的目录中找到id_ras.pub文件并拿记事本打开,全选,复制。

这个页面中点击New SSH key。其中Title随便填,Key把刚才复制的代码粘贴上去并保存。

在终端输入以下代码,看看Hi后面是不是自己邮箱,是就成功了。

1
ssh -T git@github.com

打开博客目录里的_config.yml配置文件(不是volantis文件夹里那个),在末尾找到deploy字样,修改后面的东西并替换成以下字符(注意空格):

1
2
3
4
deploy:
type: git
repository: git@github.com:<Github用户名>/<Github用户名>.github.io.git
branch: master

例:

1
2
3
4
deploy:
type: git
repository: git@github.com:charlie-zzy/charlie-zzy.github.io.git
branch: master

设置好后每次hexo g生成博客后,只要输入hexo d并等一会,让服务器刷新后就可以访问<Github用户名>.github.io这个网站啦!

恭喜,你上传了博客!

后记

Volantis作者xaoxuu真的超肝…一天一个版本,现在才配置好qwq

其实这些步骤都是一次性的,真正有意思和挑战性的是修改配置(详见主题文档Hexo文档。)

这篇文章是博客更新后的第一篇技术性文章诶


评论