基于Hexo的博客搭建（4）—— 使用Hexo博客框架并更改主题

前言

1. 这是基于Hexo的博客搭建的系列内容，完全自定义开发周期太长了，先曲线救国，借个框框用用。整个系利都有参考@卢well和hexo史上最全搭建教程的相关内容，点击博客名可直接跳转

---

一、初始化Hexo框架

在前期工作都做好之后，我们就可以开始正式的博客搭建之旅了。同样的再声明一下,本教程所有的操作都是在虚拟机的Linux系统（deepin）上完成的，但是不是只能在Linux系统上完成，其他的操作系统也可以，只是操作可能会有一点点的小区别，我主要是想借这个机会熟悉一下Linux的操作。

1. 安装Hexo

前面装好nodejs后，就可以使用npm命令了，这里使用如下命令安装Hexo：

npm install -g hexo-cli

如果有权限不足的报错的话，就加上sudo，即使用sudo npm install -g hexo-cli安装hexo
安装好后，使用hexo -v查看一下版本号，有版本号基本就安装好了
然后进入/home/用户名目录或者磁盘根目录，即终端下输入cd ~，再输入如下命令初始化博客目录：

hexo init Chrysanthemum

这个Chrysanthemum是你自己定义的，想写啥写啥，但是建议还是用英文的，避免一些莫名其妙的bug出现


等初始化完成后进入这个博客目录：

cd ~/Chrysanthemum

下载依赖文件：

npm install

其实这里刚初始化结束也可以不要这一步，因为这个时候的博客真的就只是一个框架，但是建议还是下载一下，毕竟习惯是好的，然后查看一下博客目录，应该包含以下这些东西：

node_modules: 依赖包
public：存放生成的页面
scaffolds：生成文章的一些模板
source：用来存放你的文章
themes：主题
_config.yml: 博客的配置文件

接着输入下面的命令生成静态页面

hexo generate  //(或 hexo g)

打开hexo本地服务进行测试

hexo server   //(或 hexo s)

然后会出现这样的界面：

在浏览器输入localhost:4000就可以看到你生成的博客了，样子大概这样：

虽然这里使用的是Hexo默认的配置和主题，但是功能是齐全的。
到这里，Hexo的初始化就完成了，并且通过本地测试，搭建是成功的，可以使用如下命令测试一下新建文章：

hexo new  articleName

这个articleName就是你创建文章的名字，自定。
然后使用重新启动一下本地服务，Ctrl C结束之前的服务，hexo s再开启本地服务，浏览器打开localhost:4000看一下，应该就在上面了，当然了，刚刚只是添加了一个空白的文章，文章的内容还是需要添加的，这个就后面讲了（其实也很简单的）

2. 更改Hexo主题

Hexo的默认主题就刚刚看到的那个样子，咱们功能实现了，那就给它美化一下吧。
先去到Hexo的主题库中挑选一个主题，地址：https://hexo.io/themes/
同样的，我选用的是和我博客园改造所使用的一样的风格的Sakura，这个主题通过Hexo主题库的链接已经访问不上了，但是github的项目还是存在的，还是可以直接拉下来的
建议直接在博客目录下拉取，这样后面替换用得上

cd ~/Chrysanthemum

git clone https://github.com/honjun/hexo-theme-sakura.git Sakura1

这个Sakura1是自动建来放你拉取下来的内容的目录


拉取完成后，cd Sakura1进入Sakura1目录，删除两个隐藏文件.git和.gitignore

sudo rm -rf .git
sudo rm -rf .gitignore

再将其余的文件全部替换到博客目录Chrysanthemum下：

cp -r * ~/Chrysanthemum

这里可能会报出source、scaffolds和themes为非空目录，无法移动过去，我的解决办法是：先删除博客目录Chrysanthemum下的这三个文件夹，然后再移动，当然强制移动能不能行我不知道哈，我没试过，但我觉得是可行的，下次碰到了再试
替换完之后，npm install下载依赖文件，然后你hexo g、hexo s，就可以看到效果了，大概这样子（其实和我博客园主页差不多，因为博客园这个主题就是在Sakura的基础上改动了一点点）



然后，更改配置文件，这里我就不赘述了(主要是不想写了)，借用wallleap的讲解（点击可跳转至wallleap原文）来描述一下：

修改hexo配置文件，这个文件是Chrysanthemom/_config.yml(具体可看https://hexo.io/zh-cn/docs/configuration.html)

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

# Site 网站
title: 标题                  #把这里修改为你的站点名(网站标题)
subtitle: ''                #副标题，可不输入
description: ''             #描述，可以随便写句话描述你的网站
keywords:                   #关键词，可不写(写多个时用,隔开 )
author: 作者                #作者名
language: zh-cn             #语言
timezone: 'Asia/Shanghai'   #时区

# URL  网址
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://用户名.github.io    #站点链接(开启了SSL则要改为https开头)
root: /                        #网站根目录，如果仓库名设置的是上面的那个则不需修改。如果是其他的(例如blog)请加上那个名称(/blog)，上面那个链接也要加上(/blog)
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      #如果你不想让hexo把这篇文章渲染成你设置的布局的html，可以把文件名写在这

# 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:                        #高亮，由于我们使用的Sakura用的自己的高亮，这里改成false
  enable: false
  line_number: false
  enable: false
  line_number: false
  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: Sakura      #主题名字，你想换哪个主题，下载到themes目录下之后到这来修改

# Deployment  部署相关
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: 
    github: git@github.com:用户名/用户名.github.io.git
    # github: https://github.com/honjun/honjun.github.io.git
    # coding: https://git.coding.net/hojun/hojun.git
  branch: master

# backup  备份
backup:
  type: git
  message: backup my blog of https://yourname.github.io/
  repository:
    github: http://github.com/用户名/用户名.github.io.git,backup
    # coding: https://git.coding.net/hojun/hojun.git,backup

#RSS
feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '
  order_by: -date

按照这个来改，把里面要改的东西改成你自己的就行，这里其实主要是配置你的url和github仓库地址


啊！！！然后主题配置文件修改和CDN设置大家就看wallleap的原文讲解吧，我不想写了！！谢谢大家！