美文网首页
GitHub——GitHub Pages+Hexo 搭建独立博客

GitHub——GitHub Pages+Hexo 搭建独立博客

作者: 四喜汤圆 | 来源:发表于2019-03-28 16:34 被阅读0次

一、搭建独立博客

1. 准备 Hexo

(1)安装 Node.js
用以下指令查看版本号,能查询到的话代表安装成功。

$ node -v
$ npm -v

(2)安装 Git
用以下指令查看版本号,能查询到的话代表安装成功。

$ git --version

(3)安装 Hexo
上述两个安装好后,可以使用 npm 安装 Hexo。

$ npm install -g hexo-cli

用以下指令查看版本号,能查询到的话代表安装成功。

$ hexo -v

(4)Hexo 的相关初始化及配置
安装好 Hexo 后,找个顺眼的地方新建一个文件夹,本文命名为SiXiWanZiBlog(这就是今后主要操作的文件夹),使用以下指令在该文件夹下创建所需文件。

$ hexo init <folder>-------------------------------$ hexo init F:\SiXiWanZiBlog
$ cd <folder>---------------------------------------$ cd F:\SiXiWanZiBlog
$ npm install----------------------------------------$ npm install

fetchMetadata: sill fetchPackageMetaData error for yargs卡住不动,可执行指令npm cache clean --force后再次 init。

指令执行成功后如下图所示。

上述指令生成的文件目录结构如下,具体说明参见 Hexo 官方文档

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

① _config.yml
网站的配置信息

② package.json
应用程序的相关信息,包括程序版本号、依赖等。

③ scaffolds
模板文件夹。当新建文章时,Hexo 会根据 scaffolds 来建立文件。模板是指新建的 markdown 文件中的默认填充内容。

④ source
资源文件夹,存放用户资源。除 _posts外,该文件夹下其他的以_(下划线)开头的文件夹/文件,以及隐藏文件都将被忽略。

⑤ themes
主题文件夹。Hexo 根据主题生成静态页面。

(5)在本地查看博客

$ hexo g
$ hexo s

ctrl+C可停止本地 hexo 服务

Hello World

2. 准备仓库

(1)GitHub上创建仓库
在 GitHub 上创建名为SiXiWanZi.github.io的仓库

(2)本地机器上生成公钥私钥

(3)将公钥添加到GitHub上
使用指令ssh -T git@github.com测试本地公钥是否添加成功

3. 将 Hexo 和仓库关联起来

关联的意思就是把 Hexo 生成的文章部署到 GitHub 上。

(1)配置_config.yml
将该文件尾部的deploy节点按照如下方式修改:

deploy:
  type: git
  repo: https://github.com/SiXiWanZi/SiXiWanZi.github.io.git
  branch: master

(2)使用 Hexo 生成静态页面

$ hexo clean // 该步骤可由可无
$ hexo g

(3)将静态页面部署到 GitHub

$ hexo d

发现ERROR了吧?!要想执行上述指令,需先安装 deploy-git,使用如下指令。

npm install hexo-deployer-git --save

安装成功后,再次执行$ hexo d指令,若出现如下界面,说明部署成功。

再去 GitHub 上看下仓库的 GitHub Pages ,发现变成了下面这个样子。

访问博客主页 四喜丸子的博客

二、操作博文

1. 发布博文

流程走通后,就可以开始创作了!

进入到博客所在目录,本文是SiXiWanZiBlog,执行以下指令。

$ hexo new [layout] <title>--------------------$ hexo new photo “my-first-blog”

上述指令执行时,Hexo 会尝试在 scaffolds 中寻找photo.md布局,若找到,则根据该布局新建文章;若未找到或指令中未指定该参数,则使用post.md新建文章。新建文章的名称在_config.yml中配置。

本文新建文章命名法

然后,在source文件夹的对应位置生成了我的第一篇博文。

执行以下指令,将博文发布到 GitHub 上,刷新个人主页,可以看到博文推送成功。

$ hexo g
$ hexo d

2. 删除博文

想要删除博文,直接在本地将源文件删除,然后重新发布站点即可。

三、总结

经过上述步骤,一个基本的博客框架是有了,但是界面不好看、不友好,下面进行优化。

四、参考文献

hexo史上最全搭建教程
Hexo官方文档
陈素封_如何搭建一个独立博客——简明Github Pages与Hexo教程

相关文章

网友评论

      本文标题:GitHub——GitHub Pages+Hexo 搭建独立博客

      本文链接:https://www.haomeiwen.com/subject/uixovqtx.html