Knight000's Blog

随缘写写,不定时更新

0%

HEXO搭建博客,并发布到Github上

拥有一个GITHUB账号和仓库

如果你已经有了请跳过这一步骤

注册github

首先,进入https://github.com/,你会看到以下的界面
Github注册界面
Username:是你账号显示的名称,也是别人搜索你的时候的名字,建立博客时也要用到,建议起一个简单好记的名字
Email:可以用来登录之类的东西,不用解释了吧。
Password:…记得设置的别太简单了,当然也不要把它忘了。
填写好了之后,点击下面的Sign up for Github,然后按照提示去做,你就拥有你的Github账户了。

绑定SSH

你需要安装一个Git,请点击这里去官网下载
安装的时候一直默认就好,安装完成之后,打开CMD,Powershell或者Git Bash,依次输入以下3条指令:

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

完成之后会自动在C:\Users[你的windows用户名]里面创建一个叫.ssh的文件夹,打开里面就多了3个文件:

id_rsa
id_rsa.pub
known_hosts

打开id_rsa.pub,把里面的内容复制,然后在https://github.com/settings/keys里面点击SSH and GPG keys,然后点击New SSH key这个绿框框,Title是标题,自己填个就好,在key一栏里面把你从id_rsa.pub里面复制的东西粘贴进去,点击Add SSH key,这样就添加成功了。
之后可以在你的计算机上输入

1
ssh [email protected]

如果输出是

PTY allocation request failed on channel 0
Hi 你的github用户名! You’ve successfully authenticated, but GitHub does not provide shell access.
Connection to github.com closed.

就证明你成功了

建立你的repository

点击New repository创建,名称为[你的用户名.github.io],用户名就是之前创建时填的Username
然后复制SSH,后面修改_config.yml会用到,拿来发布到github的时候用。
Githubssh

安装Nodejs和hexo

首先,进入官网,下载nodejs,点击这里进入nodejs官网
安装好之后,运行Node.js command prompt,输入:

1
npm install -g hexo-cli

等待读条完毕后,创建一个空文件夹,然后使用cd [路径]或者直接shift+右键,点击在此处打开powershell或者命令提示符,然后输入

1
hexo init

这样就完成了hexo的初始化
要测试的话,在这时候输入

1
2
hexo g
hexo s

然后在浏览器里输入http://localhost:4000就能看到一个hexo的初始页面了。
记得安装github部署插件

1
npm install hexo-deployer-git --save

设置_config.yml

进入你创建的博客文件夹,里面有一个文件,叫做_config.yml,它是你博客的配置文件,修改它,达到你所需要的效果。
以下讲一些基础的设置吧。
title:网站的标题,显示在标签栏和网站中。
subtitle:可以理解为副标题。
description:网站描述,会显示在网站中。
author:用户名,显示在网站中的各种地方。
language:语言,这里填hexo主题所提供的语言包的名称,在themes\主题名称\languages这个目录下,有很多.yml文件,像是zh-CN.yml就在这一栏填写zh-CN
timezone:时区,建议填写Asia/Shanghai
然后翻下去,找到
theme:这里填写你的主题名称,主题可以在https://hexo.io/themes/里面找到。
接下来就是设置deploy了,在文件中找到deploy这一栏,按照以下方式填写:

1
2
3
4
deploy:
type: git
repository: 之前复制的项目SSH
branch: master

设置好之后记得保存。
这个时候输入

1
2
hexo clean
hexo d

然后等读条完毕后访问[你的github用户名.github.io]就能看见你的页面了。

安装并修改主题

这里以NEXT主题为例
主题Github
主题官网
进入你的博客文件夹,打开命令窗口[cmd,powershell,gitbash都可以],输入

1
git clone https://github.com/theme-next/hexo-theme-next themes/next

等待读条完毕,你就会发现你的博客文件夹里面的themes目录下,多了个next文件夹,进去修改_config.yml以达成你想要的效果,主题官网上已有强大的说明,这里就不再做叙述。

  • 注意大小写,特别是文件和图片的引用。

绑定域名

若你要绑定域名,请在[你的博客文件夹\source]这个目录里面,新建一个 名为CNAME的文件[注意:无任何后缀名,可新建一个文本文档然后删除掉后缀名],打开并编辑,把你要绑定的域名写进去,然后在域名提供商的解析那里设置CNAME,填上[你的github用户名.github.io]就可以了。
然后编辑_config.yml,找到**skip_render:**这一栏,把CNAME添加进去,如下:

1
2
3
skip_render:
- README.md
- CNAME

新建文章

hexo的新建文章非常简单,在你的博客文件夹下,运行指令

1
hexo n "文章名"

就会自动在[你的博客文件夹\source_posts]创建一个[文章名.md]文件,使用markdown语法修改它,然后保存就可以了。
在生成的文章最上层,有默认生成的

1
2
3
title: 你的文章名
date: 生成的时间
tags: 标签请自己填

完善它。
完成后输入

1
2
hexo clean
hexo d

然后等读条完毕后访问你的博客地址就能看见了。
不过建议用hexo d发布前先用hexo s在本地预览一下情况。

标签和归档

next主题有自带的标签和归档,但是你依然要用指令来生成他们

1
2
hexo new page tags
hexo new page archives

当你在文章里使用了标签,就会在生成页面的时候自动生成一个归档,不过你需要编辑source\tags目录下的index.md,使用如下方式来添加对标签归档页面的链接,当然,你可以添加更多元素在此页面上。

1
[标签名](/tags/标签名)

标签的使用

在你的博客文件夹下,运行指令

1
hexo new page "tags"

然后进入[你的博客文件夹\source\tags],修改 index.md文件以达到你想要的效果
在里面添加markdown语法的链接让进入此页面的人能进入到相关标签的页面

1
[标签名](/tags/标签名)

在主题的_config.yml文件里面,找到**menu:**这一栏,把#tags: /tags/ || tags前面的注释号去掉。

1
2
3
4
5
6
7
8
9
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:里面修改,如果要添加多个标签请这么写:

1
2
3
4
tags:
- 标签1
- 标签2
- 标签3

加入Github-corners

什么是Github-corners?就是这个网页右上角的那个按钮,点击就可以跳转到你所需要的链接,以下链接能生成所需要代码: http://tholman.com/github-corners/

然后在你的博客根目录\themes\主题\layout里面,找到_layout.swig,打开它,找到以下内容

1
2
3
<body itemscope itemtype="http://schema.org/WebPage" lang="{{ page.lang or page.language or config.language }}">
<div class="container{%- if theme.motion.enable %} use-motion{%- endif %}">
<div class="headband"></div>

然后把你从网页上复制的内容粘贴进去,再根据自己修改,比如这样:

1
2
3
4
<body itemscope itemtype="http://schema.org/WebPage" lang="{{ page.lang or page.language or config.language }}">
<div class="container{%- if theme.motion.enable %} use-motion{%- endif %}">
<div class="headband"></div>
<a href="你的GITHUB地址" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>

然后发布就可以了。

加入搜索功能

因为用第三方搜索效果虽然好,但是有点麻烦而且有因为第三方的问题导致失效的可能,所以这里介绍的是本地搜索的功能。

https://github.com/wzpan/hexo-generator-search

首先,在博客的文件夹执行安装指令

1
npm install hexo-generator-search --save

确定安装完毕后,在博客配置文件添加以下设置

1
2
3
4
search:
path: search.xml
field: post
content: true

上面的是默认设置,其中field这一栏决定了搜索的范围,个人是all,然后下面贴出官方的介绍

  • path - file path. By default is search.xml . If the file extension is .json, the output format will be JSON. Otherwise XML format file will be exported.

  • field - the search scope you want to search, you can chose:

    • post (Default) - will only covers all the posts of your blog.
    • page - will only covers all the pages of your blog.
    • all - will covers all the posts and pages of your blog.
  • content - whether contains the whole content of each article. If false, the generated results only cover title and other meta info without mainbody. By default is true.

然后在主题配置文件找到local_search这一栏,enable改为true,其他根据自己需要修改,这里贴出我的配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
# Local Search
# Dependencies: https://github.com/wzpan/hexo-generator-search
local_search:
enable: true
# If auto, trigger search by changing input.
# If manual, trigger search by pressing enter key or search button.
trigger: auto
# Show top n results per article, show all results by setting to -1
top_n_per_article: -1
# Unescape html strings to the readable one.
unescape: false
# Preload the search data when the page loads.
preload: false

然后部署,就能看到搜索按钮了

设置摘要

next默认是在首页展示全部的文章内容,这样很影响观感,next自带自动摘要的功能…呃…或者说,曾经,修改配置文件为true的方法已经失效了。但通过在文章中添加<!-- more -->依然可以生效。

1
2
3
4
5
# Automatically excerpt (Not recommend).
# Use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
enable: false
length: 150

如果需要自动摘要,可以参考下这个链接,修改源码,不过本人并未测试。

加入Gitalk评论功能

首先,你需要一个OAuth App,进入https://github.com/settings/applications/new 创建一个新的OAuth application,参数的话

RAW
Application name 应用的名字,自定义
Homepage URL 这里填你blog的地址
Application description 应用描述,请随意也可以不填
Authorization callback URL 依然是你blog的地址

完成后创建,得到Client IDClient Secret

然后打开blog主题的_config.yml,以next的为例。

找到这些内容,根据自己需要修改:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Gitalk
# Demo: https://gitalk.github.io
# For more information: https://github.com/gitalk/gitalk
gitalk:
enable: true #改为true
github_id: 你的GITHUB用户名 # GitHub repo owner
repo: 存放issues的仓库名,可以直接用存放blog的仓库 # Repository name to store issues
client_id: 创建APP时得到的Client ID # GitHub Application Client ID
client_secret: 创建APP时得到的Client Secret # GitHub Application Client Secret
admin_user: 你的GITHUB用户名和协作者用户名 # GitHub repo owner and collaborators, only these guys can initialize gitHub issues
distraction_free_mode: true # Facebook-like distraction free mode
# Gitalk's display language depends on user's browser or system environment
# If you want everyone visiting your site to see a uniform language, you can set a force language value
# Available values: en | es-ES | fr | ru | zh-CN | zh-TW
language: zh-CN # 语言,中文blog就zh-CN,什么语言的就填什么,上面有支持的范例

修改后进行部署就完成了

更新模块和主题

主题更新

主题更新是比较简单的了,因为下载主题的时候使用的是git clone,所以在主题目录使用git pull就可以更新了。

模块更新

模块更新需要用到npm的更新系统,可以借助npm-check-updates这个模块来进行更新

首先,安装npm-check-updates模块

1
npm install -g npm-check-updates

安装好之后,进入你blog的根目录,执行ncu指令,这个指令会检查package.json里的模块有无可更新,执行ncu -u直接更新全部可更新模块,当然你可以直接执行ncu-u

结束

目前能写的大概也就这么多,以后想到什么再更新吧..