欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

github + hexo 博客搭建记录

程序员文章站 2022-03-25 17:03:26
...

github + hexo 博客搭建记录

前期准备

下载安装

nodeJS: https://nodejs.org/en/
Git :https://git-scm.com/download/win

配置

git配置

安装好git后,需要配置用户名称和邮件地址

$ git config --global user.name "username"
$ git config --global user.email "aaa@qq.com"

github配置

在自己的GitHub账号下创建一个新的仓库,命名为username.github.io(username 必须与你的账号名保持一致)。

配置SSH key

为什么要配置这个呢?因为你提交代码肯定要拥有你的github权限才可以,但是直接使用用户名和密码太不安全了,所以我们使用ssh key来解决本地和服务器的连接问题。

  1. 检查电脑是否已经有SSH KEYS
    $ ls -al ~/.ssh
    如果提示:No such file or directory 说明你是第一次使用git

  2. 如果没有SSH KEY,则生成新的SSH KEY
    ssh-****** -t rsa -C "aaa@qq.com"
    然后连续3次回车,最终会生成一个文件在用户目录下,打开用户目录,找到.ssh\id_rsa.pub文件,记事本打开并复制里面的内容,打开你的github主页,进入个人设置 -> SSH and GPG keys -> New SSH keygithub + hexo 博客搭建记录
    将刚复制的内容粘贴到key那里,title随便填,保存。

  3. 测试是否成功
    $ ssh -T aaa@qq.com
    如果提示Are you sure you want to continue connecting (yes/no)?,输入yes,然后会看到:
    Hi h0ryit! You've successfully authenticated, but GitHub does not provide shell access.
    看到这个信息说明SSH已配置成功!

此时你还需要配置:

$ git config --global user.name "liuxianan"// 你的github用户名,非昵称
$ git config --global user.email  "aaa@qq.com"// 填写你的github注册邮箱

具体这个配置是干嘛的我没仔细深究。
以上的配置流程,我是用的别人的

安装Hexo

Hexo 官网有详细步骤。

注意事项:

  1. 很多命令既可以用Windows的cmd来完成,也可以使用git bash来完成,但是部分命令会有一些问题,为避免不必要的问题,建议全部使用git bash来执行;

  2. hexo不同版本差别比较大,网上很多文章的配置信息都是基于2.x的,所以注意不要被误导;

  3. hexo有2种_config.yml文件,一个是根目录下的全局的_config.yml,一个是各个theme下的,在配置文件中修改时,冒号后面必须有一个空格,否则可能会出问题

Hexo 创建项目

打开你 Git Bash ,进入到你项目所在目录:

#Hexo 的安装
$ npm install -g hexo
#查看版本,确认是否安装成功
$ hexo -version 
#建站
$ hexo init <project-name>
$ cd <project-name>
$ npm install
#生成静态页面(markdown文件转化为html文件)
$ hexo generate
#网站预览(默认的主题风格landscape)
$ hexo server

默认预览端口为:http://localhost:4000/页面正常显示则创建成功

部署到github

  1. 配置站点_config.yml
deploy:
  type: git
  repo: https://github.com/h0ryit/h0ryit.github.io.git
  branch: master
  1. 安装git插件
    $ npm install hexo-deployer-git --save

  2. 部署上线

$hexo generate
$hexo deploy

成功后通过https://username.github.io进行访问

个性化配置

安装NexT主题

  1. 下载主题
    https://github.com/iissnan/hexo-theme-next
    将其放置在./theme/next目录下(自己创建)
  2. 启用主题
    打开站点配置文件_config.yml
    theme: next
  3. 验证主题
    hexo s --debug
    此时即可使用浏览器访问 http://localhost:4000,检查站点是否正确运行。

站点_config.yml配置文件

title: h0ryit's blog #博客名字
subtitle: 格物致知,知行合一 #小标题
description: 技术分享 学习记录 #站点描述
author: h0ryit #作者名称
language: zh-Hans #语言
timezone:     #时区,可不填写
url: https://h0ryit.github.io/  #一般写自己的站点连接
root: / #设置根目录
permalink: :year/:month/:day/:title/  #生成的链接的格式
permalink_defaults:  #生成链接中各部分的默认值
# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:
  - README.md
  - CNAME
#目录一般不需要修改,这里需要改动的是skip_render,跳过指定文件的渲染,这里写上去着两个文件名便可
# Category & Tag
default_category: uncategorized  #如果撰写文章时没有设置分类,默认的分类选择。
category_map: #用于映射分类的别名。
tag_map: #用法和分类别名是一样的

需要配置的之前都已经说了,其他的保持默认配置就行。

主题配置文件_config.yml

注:不是站点配置文件,在themes/next目录下

选择布局

# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces  #我选的Pisces布局
#scheme: Gemini

添加RSS

安装 hexo-generator-feed插件

$ npm install --save hexo-generator-feed

修改站点配置文件,在最后添加以下代码:

feed: # RSS订阅插件
  type: atom
  path: atom.xml
  limit: 0

plugins: hexo-generate-feed

修改主题配置文件如下:

# Set rss to false to disable feed link.
# Leave rss as empty to use site's feed link.
# Set rss to specific value if you have burned your feed already.
rss: /atom.xml

菜单设置

图标开启
menu:
  home: / || home                          //首页
  archives: /archives/ || archive          //归档
  categories: /categories/ || th           //分类
  tags: /tags/ || tags                     //标签
  about: /about/ || user                   //关于
  #schedule: /schedule/ || calendar        //日程表
  #sitemap: /sitemap.xml || sitemap        //站点地图
  #commonweal: /404/ || heartbeat          //公益404

看看你需要哪个菜单就把哪个取消注释打开就行了

新建页面

在站点根目录输入以下代码新建页面:

$ hexo new page tags
$ hexo new page categories
$ hexo new page about
设置类型

打开站点根目录\source\tags站点根目录\source\categories分别进行修改:

---
title: tags
date: 2018-08-06 08:52:25
type: "tags"
comments: false
---
---
title: categories
date: 2018-08-06 08:52:40
type: "categories"
comments: false
---

如果有集成评论服务,页面也会带有评论。因为后面我们会添加评论系统所以这里需要添加字段 comments 并将值设置为 false。

添加侧边栏社交链接

social:
  GitHub: https://github.com/h0ryit || github
  E-Mail: mailto:1425810321@qq.com || envelope
  #Google: https://plus.google.com/yourname || google
  #Twitter: https://twitter.com/yourname || twitter
  #FB Page: https://www.facebook.com/yourname || facebook
  #VK Group: https://vk.com/yourname || vk
  #*: https://*.com/yourname || stack-overflow
  #YouTube: https://youtube.com/yourname || youtube
  #Instagram: https://instagram.com/yourname || instagram
  #Skype: skype:yourname?call|chat || skype

头像设置

打开主题配置文件找到Sidebar Avatar字段

# Sidebar Avatar
avatar: /images/header.jpg

这是头像的路径,只需把你的头像命名为header.jpg(随便命名)放入themes/next/source/images中,将avatar的路径名改成你的头像名就OK啦!

添加搜索功能

安装 hexo-generator-searchdb 插件

$ npm install hexo-generator-searchdb --save

打开 站点配置文件 找到Extensions在下面添加

# 搜索
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

打开主题配置文件找到Local search,将enable设置为true

添加评论系统

登陆来必力注册,注册后点击导航上的安装,选择免费的city版本,点击现在安装后填入网站的一些信息就可以获取到安装代码,框中的就是你的来必力id:
github + hexo 博客搭建记录
复制上边的id,在主题配置文件里面搜索livere_uid,在后面添加来必力id即可:

# Support for LiveRe comments system.
# You can get your uid from https://livere.com/insight/myCode (General web site)
livere_uid: {你的来必力id}

另外可以点击用户头像进入管理界面个性化你的评论系统:
github + hexo 博客搭建记录

增加版权信息

在目录themes/next/layout/_macro/下添加my-copyright.swig,代码如下:

{% if page.copyright %}
<div class="my_post_copyright">
  <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>

  <!-- JS库 sweetalert 可修改路径 -->
  <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
  <p><span>本文标题:</span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p>
  <p><span>文章作者:</span><a href="/" title="访问 {{ theme.author }} 的个人博客">{{ theme.author }}</a></p>
  <p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:MM") }}</p>
  <p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:MM") }}</p>
  <p><span>原始链接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
    <span class="copy-path"  title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}"  aria-label="复制成功!"></i></span>
  </p>
  <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p>  
</div>
<script> 
    var clipboard = new Clipboard('.fa-clipboard');
    $(".fa-clipboard").click(function(){
      clipboard.on('success', function(){
        swal({   
          title: "",   
          text: '复制成功',
          icon: "success", 
          showConfirmButton: true
          });
    });
    });  
</script>
{% endif %}

在目录themes/next/source/css/_common/components/post/下添加my-post-copyright.styl

.my_post_copyright {
  width: 85%;
  max-width: 45em;
  margin: 2.8em auto 0;
  padding: 0.5em 1.0em;
  border: 1px solid #d3d3d3;
  font-size: 0.93rem;
  line-height: 1.6em;
  word-break: break-all;
  background: rgba(255,255,255,0.4);
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {
  display: inline-block;
  width: 5.2em;
  color: #b5b5b5;
  font-weight: bold;
}
.my_post_copyright .raw {
  margin-left: 1em;
  width: 5em;
}
.my_post_copyright a {
  color: #808080;
  border-bottom:0;
}
.my_post_copyright a:hover {
  color: #a3d2a3;
  text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {
  color: #000;
}
.my_post_copyright .post-url:hover {
  font-weight: normal;
}
.my_post_copyright .copy-path {
  margin-left: 1em;
  width: 1em;
  +mobile(){display:none;}
}
.my_post_copyright .copy-path:hover {
  color: #808080;
  cursor: pointer;
}

修改themes/next/layout/_macro/post.swig,在代码:

    {% if theme.wechat_subscriber.enabled and not is_index %}
      <div>
        {% include 'wechat-subscriber.swig' %}
      </div>
    {% endif %}

前面添加代码:

<div>
      {% if not is_index %}
        {% include 'my-copyright.swig' %}
      {% endif %}
</div>

修改themes/next/source/css/_common/components/post/post.styl文件,在最后一行增加代码:

@import "my-post-copyright"

最后到站点根目录/scaffolds/post.md,在两个---中间增加一行:

copyright: true

之后的每一篇文章都会自己加上版权信息,之前的文章也可以通过在文章对应的md文件头部加上以上代码添加版权信息。

添加背景动画

NexT已经自带了多种背景动画效果,你只需要根据需求在主题配置文件修改其中一个为true即可。

# Canvas-nest 
canvas_nest: false

# three_waves
three_waves: false

# canvas_lines
canvas_lines: false

# canvas_sphere
canvas_sphere: false

# Only fit scheme Pisces
# Canvas-ribbon
canvas_ribbon: false

添加侧边栏友情链接

修改主题配置文件:

# Blog rolls
links_title: Links
#links_layout: block
links_layout: inline
links:
  csdn: https://blog.csdn.net/w0ryitang

自动折叠全文

进入hexo博客项目的themes/next目录

用文本编辑器打开_config.yml文件

搜索”auto_excerpt”,找到如下部分:

# Automatically Excerpt. Not recommand.
# Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
  enable: false
  length: 150

把enable改为对应的false改为true,然后hexo d -g,再进主页,问题就解决了!

以上是我搭建博客的记录,效果如下
h0ryit’s blog

关于 hexo 的博文写作参考:https://hexo.io/zh-cn/docs/writing

相关标签: 博客