使用hexo和github搭建静态博客网站(二)

前端阅读室

使用hexo搭建博客网站

全局安装hexo-cli

npm install hexo-cli -g

npm安装速度较慢,能够切换到国内的淘宝NPM镜像,使用cnpm命令代替npm命令安装。html

安装完成后执行hexo -v检查安装是否完成。前端

hexo -v

hexo-cli: 1.1.0
os: Darwin 18.2.0 darwin x64
http_parser: 2.8.0
node: 10.15.3
v8: 6.8.275.32-node.51
uv: 1.23.2
zlib: 1.2.11
ares: 1.15.0
modules: 64
nghttp2: 1.34.0
napi: 3
openssl: 1.1.0j
icu: 62.1
unicode: 11.0
cldr: 33.1
tz: 2018e

初始化博客工程

hexo init blog
cd blog

安装NexT主题

咱们这里选取了NexT主题替换默认的landscape主题,固然你彻底可使用默认的landscape主题,或者根据本身的喜爱选择其余主题。安装主题的方式很是简单,只须要将主题文件克隆至工程目录的 themes目录下, 而后修改下配置文件_config.yml便可。node

在工程目录下克隆最新版本的next主题git

cd blog
git clone https://github.com/iissnan/hexo-theme-next themes/next

修改根目录下_config.yml配置文件,找到theme字段,将landscape改成next。github

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape

修改成npm

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

执行hexo server,启动本地服务器。json

hexo server

访问网址http://localhost:4000/即可以看到使用next主题的博客网站的样子了。
avatarapi

将本地hexo工程链接到git远端仓库

咱们用前面创建的hexo-test和blog两个工程作演示。其中本地hexo为blog目录,hexo-test为git远端仓库,咱们须要将本地blog目录里的文件提交到远端的hexo-test仓库。缓存

首先,咱们以前提交的index.html文件,咱们再也不须要了,先删除它。bash

cd hexo-test
rm -rf index.html
git add .
git commit -m 'remove index.html'
git push origin master

blog目录git初始化

cd blog
git init

此时咱们看到next目录没法直接提交,这是由于next目录是一个子模块(submodule)
avatar
咱们须要删除next目录下的.git文件,next目录变成一个普通文件夹,这样它就能够直接提交了。
进入next目录,执行rm -rf .git命令

cd themes/next/
rm -rf .git

此时next目录就能够直接提交了
avatar
执行如下命令就能够将blog目录里的内容提交到远端的hexo-test仓库了

git add .
git commit -m 'init'
git remote add origin git@github.com:mfaying/hexo-test.git
git push -f origin master

注意,这里个人本地电脑和远端的git已经配置过ssh了,因此提交的时候不会出现权限问题。若是你链接的是本身的远端仓库,能够查找下如何进行git的ssh配置。

部署

部署咱们须要建一个前面提到的开通GitHub Pages功能的工程,这个专门放置部署的静态文件,咱们将该工程命名为hexo-test-deploy(如果发布到hexo-test工程上远端的源代码会被部署的静态文件覆盖掉)。这时hexo-test其实就不须要开通GitHub Pages功能了,并且hexo-test也能够设置成私有工程以免源代码被查看。

最后咱们须要配置部署路径,修改文件_config.yml的deploy字段以下:

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: git@github.com:mfaying/hexo-test-deploy.git #你的GitHub Pages的仓库地址
  branch: master

咱们须要先安装hexo-deployer-git依赖包才能执行hexo deploy命令部署网站

npm install hexo-deployer-git --save

执行如下命令

hexo clean # 简写hexo c,清除缓存文件(db.json)和已生成的静态文件(public)
hexo generate # 简写hexo g,生成静态文件
hexo deploy # 简写hexo d,部署

其中hexo g和hexo d能够合并写成hexo d -g
如今咱们访问以前的连接 https://mfaying.github.io/hex...,一个静态博客网站生成了!
avatar

至此,咱们其实已经完成静态博客网站的建设,后续咱们将介绍一些功能和方法,使网站功能更加完备。

参考

  1. 文档|hexo
  2. hexo
  3. NexT 使用文档

前端阅读室

相关文章
相关标签/搜索