个人我的博客搭建之旅

引言

从2017年到如今，总共有两次用Hexo来搭建我的博客。
访问方子龙的博客:http://www.raysonblog.cn/

• 第一次：
  在2017年的时候，开始想着用Java干它一个属于本身的博客，固然不是立刻就开始干，得网上查找资料啊！看看是否有现成的可以直接使用。在此过程当中，发现有不少的博客主题都基本上一致，并且还比较好看, 效果杠杠地。为了知足好奇心，就看到网站下方有关于Hexo的字样，就点进去看到了一下简介，并且还有不少好看的主题，还能够随意配置本身喜欢的主题。顿时我就打消了要本身写博客程序的念头。有这么好用的，固然是直接拿来即用。就这样，一边搭建一边学习也就有了Hexo+Next主题的初版博客。

  遗憾的是，搭建成功之后，也没有去管理，任它荒废。
  

• 第二次：
  搭建过程耗时一个月左右的时间，抽空闲时间来作，相比第一次，此次的搭建过程耗时比较长，主要缘由是修改主题样式，对主题代码不熟悉。可是整体收获仍是不少。效果样式都还比较喜欢，蛮符合我内心的预期。

接下来，就谈谈如何搭建，以及一些思考。 具体详细如何搭建也能够百度。

一. 环境配置

【Nodejs】官网下载：https://nodejs.org/zh-cn/

【Git】官网下载：https://git-scm.com/

网上有不少相关的安装使用教程，我这里就很少余的说。本身动手才是硬道理。

二. Hexo的安装与经常使用基本命令

基础环境配置好之后，那么接下来就能够安装生成静态博客网站的关键--Hexo，其主要信息和安装命令，主题等均可以经过官网轻松的了解：https://hexo.io/zh-cn/

为了安装Hexo，只须要在blog-hexo目录中单击右键启动Git Bash Here，而后输入命令：

npm install hexo-cli -g

网上有不少其余的命令，建议一切以官网命令为依据，因为时间版本缘由，颇有可能将来的命令发生改变而失效。

而后等待几分钟（取决于你的网速），完成后。

在blog-Hexo目录下执行以下命令进行初始化：

hexo init

而后就可使用Hexo三连击，即咱们最经常使用的三个主要命令（依旧在上述Git Bash命令端口中）：

hexo clean # 清空已有hexo网站文件
hexo generate(or g) # 依据网页文本与新的CSS样式生成新网站文件
hexo server(or s) # 启动本地服务器

能够在localhost:4000查看网站修改效果 依次运行上述三个命令，就能够在浏览器打开localhost:4000端口，查看对应网站界面效果。

通常默认的是一个landscape主题，后期当提交新文章或者新的样式修改时，每每都是先从本地查看结果无误后再部署到Github Pages。

Hexo deploy(or d) #提交代码到Github上

三. Hexo主题下载与使用

主题官网浏览地址：https://hexo.io/themes/

在选择主题的过程当中耗费了不少的时间和遇到了不少问题，其缘由就是主题功能不全以及选择本身喜欢的风格致使的。最后推荐搭建使用hexo-theme-next主题，由于这个功能最全。

在这个过程当中,主题的许可能是要修改的。

• 菜单
• 版权
• gitHub banner
• 社交信息
• 头像信息
• 阅读时间统计
• 打赏设置
• 评论设置
• 百度统计
• leancloud访问统计
• 不蒜子阅读访问统计
• 本地搜索
• SEO优化(必需要作，而后百度就搜不到你的博客)

四. 两个重要的配置文件：Hexo的配置文件与主题的配置文件

4.1 Hexo配置文件

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site 站点
title: 方子龙
subtitle:
description: 「方子龙」一天不码字就剁手的程序猿。专一Java、Golang、Spring Boot/Spring Cloud等技术交流分享。
keywords: 方子龙,SpringBoot,SpringCloud,Java技术干货,程序猿,Golang
author: 方子龙
language:
timezone:

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://www.raysonblog.cn
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
book_dir: books
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10
  order_by: -date
  
# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repository: git@github.com:raysonfang/raysonblog.github.io.git
  branch: master

主要修改3个地方：

• Site 站点信息配置
• URL 域名信息配置
• theme 主题配置
• Deploy 代码托管提交配置

4.2 主题的配置文件

主题中的配置文件跟每一个主题有关，能够本身尝试修改，而后运行看效果。

五. 准备一个属于本身的专属域名

上面的博客只能在本地访问，须要放到外网上去，还得将编译好的静态文件提交到代码托管平台，好比github, Gitee等，这些平台都支持Pages服务。至于如何部署， 网上也能够找到资料。购买了本身的域名，那配置也相对简单。

六. 问题总结

1. GitHub Pages自定义域名后每次hexo d都会失效解决

只要在source 目录添加一个新文件CNAME就好

CNAME –不带任何后缀，这就是全称，里面写的是你的域名

而后就ok了。

怎么push都不用再去GitHub Pages设置了

2. 如何让文章能被指定的layout样式渲染

---
title: 关于我
layout: about #指定模板
---

3. 文件分类如何指定二级分类

---
title: 个人我的博客搭建之旅
date: 2019-6-27 16:50:32
author: 方子龙
original: true   # 自定义文章属性 原创标识
tuijian: true    # 自定义文章属性  推荐标识
categories: #分类
- 杂谈     #一级分类
- 我的感想 # 二级分类
tags:
- 杂谈
---

4. 文章如何自定义属性以及模板如何取值

---
title: 个人我的博客搭建之旅
date: 2019-6-27 16:50:32
author: 方子龙 # 自定义文章属性 做者
original: true   # 自定义文章属性 原创标识
tuijian: true    # 自定义文章属性  推荐标识
categories: #分类
- 杂谈     #一级分类
- 我的感想 # 二级分类
tags:
- 杂谈
---

在模板中取值：

post.author
post.original
post.tuijian

5. 如何获取整个站点的文章

site.posts

6. 添加gitment评论 解决object ProgressEvent，汉化等问题

直接添加以下：

<link rel="stylesheet" href="https://billts.site/extra_css/gitment.css">
<script src="https://billts.site/js/gitment.js"></script>

<div id="gitmentContainer"></div>
<link rel="stylesheet" href="https://billts.site/extra_css/gitment.css">
<script src="https://billts.site/js/gitment.js"></script>
<script>
    var gitment = new Gitment({
        id: '<%= page.date %>',
        owner: '<%=theme.comment.gitment.github_user%>',
        repo: '<%=theme.comment.gitment.github_repo%>',
        oauth: {
            client_id: '<%=theme.comment.gitment.client_id%>',
            client_secret: '<%=theme.comment.gitment.client_secret%>',
        },
        cleanly: '<%=theme.comment.gitment.cleanly%>',
    });
    gitment.render('gitmentContainer');
    <%if(theme.comment.gitment.cleanly) {%>
        $('.gitment-container.gitment-footer-container').hide();
    <%}%>
</script>

试一试评论：https://www.raysonblog.cn/2019/06/27/my-first-blog/

七. 总结

在搭建博客以前，我就想过本身的博客要有“书单”，“工具”，“写做&翻译”等菜单，就都放置到了博客的菜单栏上，随后又得考虑每个菜单页的内容布局要怎么作。后来发现每个菜单的内容没有好的布局，老是零散的。因此我忍痛割爱，在没有好的想法以前，就先隐藏掉。在修改主题的代码过程当中，仍是颇有一点难度。不过慢慢地也就驾轻就熟了，知道怎么修改主题里的代码。我老是爱折腾的，时间花的比较多，可是收获老是不少。