继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

使用hexo和github搭建个人博客网站

慕盖茨0596843
关注TA
已关注
手记 16
粉丝 1
获赞 10

更多文章欢迎大家关注微信公众号 前端阅读室

使用hexo+github可以免费、快速地搭建一个静态博客网站,并且使用hexo提供的命令以及git自身的功能可以很便捷地管理博客。

使用github部署静态页面

在了解hexo之前,我们先看看如何使用github部署静态页面。

注册github账号

访问github官网注册一个账号,该流程和一般网站注册账号一样,在此不赘述。

创建一个git仓库

avatar

其他项如果需要可以自主填写,这里只填写仓库名,点击Create repository创建仓库。

avatar

提交一个测试页面

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


git  clone  git@github.com:mfaying/hexo-test.git

avatar

向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>

提交并推到远端


git  add .

git  commit -m  'add index.html'

git  push  origin  master

提交成功以后,hexo-test仓库的内容变成了

avatar

setting设置

点击setting设置

avatar

找到GitHub Pages,点击Choose a theme

avatar

直接点击Select theme

avatar

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

avatar

直接点击https://mfaying.github.io/hexo-test/ 访问便会出现如下内容,静态服务器默认会访问index.html文件。

avatar

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

使用hexo搭建博客网站

全局安装hexo-cli


npm  install  hexo-cli -g

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

安装完成后执行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目录就可以直接提交了

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

avatar

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

博客网站功能完善

这节我们只会介绍几个完善网站功能的方法,如果你还想增加其他功能,可以通读NexT 使用文档文档|hexo,根据自己的需要来增加功能。

设置语言

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


language: zh-Hans

此时页面变为

avatar

设置菜单

修改主题配置文件(/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

部署后可以发现一篇文章创建成功了。

avatar

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其实还有很多相当多的功能可以使用,比如阅读人数统计、评论功能等等,你还可以根据自己的想法去修改源码完善自己的博客。

参考

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP