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 ID和Client 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

结束

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