使用hexo和github搭建我的博客网站

时间  2019-11-08
标签 使用 hexo github 搭建 我的 博客 网站 栏目 Git 繁體版
原文   原文链接

在这里插入图片描述
使用hexo+github能够免费、快速地搭建一个静态博客网站，而且使用hexo提供的命令以及git自身的功能能够很便捷地管理博客。

使用github部署静态页面

在了解hexo以前，咱们先看看如何使用github部署静态页面。html

注册github帐号

访问github官网注册一个帐号，该流程和通常网站注册帐号同样，在此不赘述。node

建立一个git仓库

在这里插入图片描述
其余项若是须要能够自主填写，这里只填写仓库名，点击Create repository建立仓库。
在这里插入图片描述

提交一个测试页面

执行git clone命令将仓库克隆到本地git

git clone git@github.com:mfaying/hexo-test.git
复制代码

在这里插入图片描述
向hexo-test仓库提交一个测试的html页面，命名为index.html，内容以下： 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>hexo test</title>
</head>
<body>
  hexo test
</body>
</html>
复制代码

提交并推到远端github

git add .
git commit -m 'add index.html'
git push origin master
复制代码

提交成功之后，hexo-test仓库的内容变成了 npm

在这里插入图片描述

setting设置

点击setting设置 json

在这里插入图片描述
找到GitHub Pages，点击Choose a theme
在这里插入图片描述
直接点击Select theme
avatar

此时你会发现GitHub Pages发生了变化，Your site is ready to be published at https://mfaying.github.io/hexo-test/说明你的静态网站已经建成了。 api

在这里插入图片描述
直接点击https://mfaying.github.io/hexo-test/ 访问便会出现以下内容，静态服务器默认会访问index.html文件。
avatar

至此，咱们成功地使用github搭建了一个静态网站。固然啦，这个网站几乎没有什么内容，因此接下来咱们将使用hexo搭建一个功能完备的博客网站，可是部署方法就是这里介绍的github的静态服务器功能。缓存

使用hexo搭建博客网站

全局安装hexo-cli

npm install hexo-cli -g
复制代码

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

安装完成后执行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便可。

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

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

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

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape
复制代码

修改成

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next
复制代码

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

hexo server
复制代码

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

avatar

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

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

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

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目录就能够直接提交了

在这里插入图片描述
执行如下命令就能够将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 如今咱们访问以前的连接 mfaying.github.io/hexo-test-d…

avatar

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

博客网站功能完善

这节咱们只会介绍几个完善网站功能的方法，若是你还想增长其余功能，能够通读NexT 使用文档、文档|hexo，根据本身的须要来增长功能。

设置语言

修改站点配置文件(_config.yml)的language字段，好比设置为简体中文

language: zh-Hans
复制代码

此时页面变为

在这里插入图片描述

设置菜单

修改主题配置文件(/themes/next/_config.yml)的menu字段

menu:
 home: / || home
  #about: /about/ || user
  #tags: /tags/ || tags
  #categories: /categories/ || th
 archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat
复制代码

修改成

menu:
 home: / || home
  #about: /about/ || user
 tags: /tags/ || tags
 categories: /categories/ || th
 archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat
复制代码

建立tags页面

hexo new page "tags"
复制代码

编辑/source/tags/index.md文件为

---
title: tags
date: 2019-10-05 16:02:39
type: "tags"
comments: false ---
复制代码

建立categories页面

hexo new page "categories"
复制代码

编辑/source/categories/index.md文件为

---
title: categories
date: 2019-10-05 15:59:54
type: "categories"
comments: false ---
复制代码

配置根路径为

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://mfaying.github.io/hexo-test-deploy
root: /hexo-test-deploy/
permalink: :year/:month/:day/:title/
permalink_defaults:
复制代码

访问页面以下

avatar

建立一篇文章

执行命令建立一篇文章

hexo new '测试文章'
复制代码

咱们发如今source/_posts/目录下生成了测试文章.md，编辑内容以下

---
title: 文章测试
date: 2019-10-05 16:20:04
tags:
 - hexo
categories: 其余 ---
这是摘要
<!-- more -->
如下是正文
# 标题1
1
## 标题2
2
复制代码

部署后能够发现一篇文章建立成功了。

在这里插入图片描述

push时自动部署

咱们借助git的钩子实如今本地代码推送到远端时自动部署网站。

首先安装husky开发环境依赖包

npm install husky --save-dev
复制代码

修改根目录package.json文件以下

"scripts": {
  "publish": "hexo clean && hexo d -g"
},
"husky": {
  "hooks": {
    "pre-push": "npm run publish"
  }
},
复制代码

此时执行命令

git add .
git commit -m '自动部署'
git push origin master
复制代码

咱们会发如今代码提交时，自动执行了hexo clean && hexo d -g部署命令。

至此，咱们使用hexo和github搭建静态博客网站的内容已经介绍完毕了，hexo其实还有不少至关多的功能可使用，好比阅读人数统计、评论功能等等，你还能够根据本身的想法去修改源码完善本身的博客。

参考

  1. 文档|hexo
  2. hexo
  3. NexT 使用文档
    在这里插入图片描述
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程