基于 Hexo + GitHub Pages 搭建个人博客(一) 这篇文章中,我们已经知道如何使用 Hexo + GitHub Pages 搭建一个个人博客,GitHub 为我们提供了免费的域名和服务器,非常方便,无需我们费心。但是 Hexo 博客的原生主题并不符合大众的风格,那么如何为 Hexo 博客更换成我们喜欢的主题呢?下面这篇就来详细解答如何配置博客个人信息以及更换博客主题,以很多人都在使用的 NexT 主题为例。

一、配置博客个人信息

1、打开博客目录,如下图所示,打开 Hexo 全局配置文件 _config.yml

2、在 Hexo 全局配置文件中,具体配置和如下,配置后面有详细注解说明:

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/ # Site 站点信息配置
title: compassblog #站点名
subtitle: 刻苦学习,解决眼前的苟且,追寻诗和远方... #站点副标题
description: 微信公众号:compassblog #站点信息简介
author: 孔乙己 #站点作者
language: zh-Hans #站点语言,default 默认是英文,zh-Hans 是中文
timezone: Asia/Shanghai #时区
avatar: /images/logo.jpg #站点 logo # URL 博客地址
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://compassblog.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: # 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: 3 #每页文章数量
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 站点部署到 GitHub 上,这里上一篇文章已经配置过
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repository: git@github.com:compassblog/compassblog.github.io.git
branch: master
message: hexo deploy

友情提示:如果真的想搭建一个博客,建议要动起手来,一步一步,只有真正行动了,才会发现自己错在哪里,真的是这样。

特别注意:配置 *.yml 文件有严格的格式要求,文件里所有的配置都是:冒号 空格 值,并且冒号是英文状态下的输入。而 *.yml 格式的文件是 Java 模板引擎 thymeleaf 文件,想了解的可以前往 官网

3、到这里我们在博客目录右键点击 Git Bash命令,执行以下命令,本地启动服务器预览博客,然后去浏览器地址栏访问就会发现,Hexo 博客的基本站点信息已经配置完毕

hexo server

注:如果想查看配置后的信息是怎样的,可前往我已经搭建好的博客 点击前往我的个人博客 查看,这里就不截图了。

二、将 Hexo 博客主题更换为 NexT 主题

1、下载 NexT 主题:下载解压,命名为 next ,放置到博客目录的 themes 文件夹下,如下图所示:

2、修改 hexo 文件夹下的主配置文件 _config.yml ,将 theme 属性修改为 next ,修改代码代码如下,具体如图所示:

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

3、到这里我们在博客目录右键点击 Git Bash命令打开窗口,执行以下命令,本地启动服务器预览博客,然后去浏览器地址栏访问就会发现,Hexo 博客的主题已经变成了 NexT 主题。

hexo server

4、打开博客目录下的 themes 文件夹,进入我们刚刚配置的 next 文件夹,如下图所示,打开主题配置文件 _config.yml

5、在主题文件中配置 Hexo 博客演示外观,如下所示:默认的 Hexo 样式是 Muse 原生样式,我这里选的是 Pesces 样式

# ---------------------------------------------------------------
# Scheme Settings
# --------------------------------------------------------------- # Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini

注:# 表示注释,要启用那个样式就直接把 # 去掉即可。想体验各种样式的不同之处,可以动起手来,亲自测试,本地预览。

6、配置网站底部基本信息,具体配置代码如下:

footer:
# Specify the date when the site was setup.
# If not defined, current year will be used.
since: 2018 #网站起始运营年份 # Icon between year and copyright info.
icon: user #声明图标 # If not defined, will be used `author` from Hexo main config.
copyright: 指南者工作室 #版权所有
# -------------------------------------------------------------
# Hexo link (Powered by Hexo).
powered: false #是否显示驱动 theme:
# Theme & scheme info link (Theme - NexT.scheme).
enable: false #是否显示主题
# Version info of NexT after scheme info (vX.X.X).
version: false

7、配置菜单按钮,在主题配置文件中,找到 menu 属性,做如下配置:

# ---------------------------------------------------------------
# Menu Settings
# --------------------------------------------------------------- # When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash from link value (/archives -> archives).
# Usage: `Key: /link/ || icon`
# Key is the name of menu item. If translate for this menu will find in languages - this translate will be loaded; if not - Key name will be used. Key is case-senstive.
# Value before `||` delimeter is the target link.
# Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, question icon will be loaded.
menu:
home: / || home #首页,后面的表示图标
categories: /categories/ || th #分类
tags: /tags/ || tags #标签
archives: /archives/ || archive #归档
about: /about/ || user #关于
#schedule: /schedule/ || calendar
#sitemap: /sitemap.xml || sitemap
#commonweal: /404/ || heartbeat

8、到这里,网站基本信息的配置基本完成,但这时候本地测试时我们会发现,打开分类、标签、关于几个页面时会显示 404 错误,找不到页面,这是因为我们还没有创建相应的页面。在 Git Bash 窗口执行下面的命令,创建相应的页面即可,这时候我们会发现博客目录的 source 文件夹下已经生成了跳转页面的生成,如图所示:

hexo new page 'categories'
hexo new page 'tags'
hexo new page 'about'

9、每一个分类菜单都生成了一个 index.md 初始文件,默认包含了 title 和 date 字段,我们需要给每一 index.md 文件添加上 type 字段,如下图所示:

10、配置搜索菜单:

(1)安装 hexo-generator-searchdb ,在 Git Bash 窗口执行一下命令

npm install hexo-generator-searchdb --save

(2)打开全局配置文件,新增下面代码

search:
path: search.xml
field: post
format: html
limit: 10000

(3)打开主题配置文件,找到 local_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

11、到这里我们在 Git Bash窗口,执行以下命令,本地启动服务器预览博客,然后去浏览器地址栏访问就会发现,博客的主题更换和基本配置已经完成,如下图所示:

三、在 Hexo 博客发布文章并托管到 GitHub Pages

1、永远的 Hello Hexo :在 Git Bash 命令窗口执行下面的命令,新建一篇文章 "Hello Hexo",到博客目录的 /source/_posts/ 文件夹下可以发现,已经生成了标题为 Hello-Hexo.md 的博客文件,如图所示,我们直接编辑自己的文章即可。

hexo new "Hello Hexo"

特别提示:Hexo 发布的文章是 Markdown 格式的文件,如没使用过 Markdown 编辑器的同学,可以自行去学习一下 Markdown 语法,半小时基本可以掌握基本的语法了,推荐一个学习 Markdown 基本语法的网址: 点击前往

2、给文章添加分类和标签:直接在所要编辑文章的头部添加如下代码即可

---
title: Hello Hexo
date: 2018-03-23 09:09:19
tags: [Hexo]
categories: [Hexo]
---

注:多个分类和标签可以使用英文状态下的句号分隔。

3、本地启动,浏览器测试预览文章,如图所示:

4、添加阅读全文按钮:在文章的任意位置添加下面命令即可

<!--more-->

5、所要发表的文章在本地预览无误后,在 Git Bash 命令窗口执行以下命令,发布到 GitHub Pages 上

hexo clean && hexo g && hexo d

6、上传成功后,在浏览器地址栏直接访问自己的域名: 直接访问,即可看到自己编写的文章已经发布到了 GitHub 上。并且每次发布文章到 GitHub 都需要执行下面的流程:

  • Hexo clean
  • Hexo g
  • Hexo d

扫描二维码关注微信公众号,了解更多

基于 Hexo + GitHub Pages 搭建个人博客(二)的更多相关文章

  1. 基于 Hexo + GitHub Pages 搭建个人博客(三)

    一.添加扫描二维码关注功能 打开 themes 目录下的 next 主题配置文件,找到 Wechat Subscriber 标签,将该标签下的配置改成如下形式: # Wechat Subscriber ...

  2. 基于 Hexo + GitHub Pages 搭建个人博客(一)

    前言:我的博客写作之路 15 年刚上大学,第一次接触公众号,就萌生了创建一个公众号写点东西,但最终不了了之. 很快到了 16 年,开始接触网上各大博客网站,接触最多的当属 CSDN,萌生了注册一个博客 ...

  3. 基于Hexo+Github Pages搭建的博客

    概念 Github Pages可以被认为是用户编写的.托管在github上的静态网页.使用Github Pages可以为你提供一个免费的服务器,免去了自己搭建服务器和写数据库的麻烦.此外还可以绑定自己 ...

  4. 使用Hexo + GitHub Pages 搭建个人博客

    一.前言 之前是在CSDN上写博客的,但是无奈其广告满天飞,还有因为个人不太喜欢CSDN博客里的一些东西,加上看到很多技术大牛都有自己的个人博客,于是乎!便想着搭建一个自己的个人博客.其实之前写博客还 ...

  5. Hexo + Github Pages 搭建个人博客

    之前一直想搭建自己的博客,由于自己的懒惰拖到现在.好了,废话不多说!直接上干货! 安装Node.js 安装Git Github Pages配置 安装Hexo及主题设置 进阶篇-高级定制 其它实用功能 ...

  6. 【一】Ubuntu14.04+Jekyll+Github Pages搭建静态博客

    本系列有五篇:分别是 [一]Ubuntu14.04+Jekyll+Github Pages搭建静态博客:主要是安装方面 [二]jekyll 的使用 :主要是jekyll的配置 [三]Markdown+ ...

  7. 使用github pages搭建个人博客

    一.环境准备 使用Github Pages搭建个人博客,一劳永逸,可以让我们更加专注于博客的撰写.博客的更新是通过将新建或改动的博客放在指定文件夹并推送到远程Github仓库来完成的,所以我们本地需要 ...

  8. Hugo + Github Pages 搭建个人博客

    尝试过 Hexo .GatsbyJs. Vuepress 搭建博客后,对这些工具最大的不满,就是运行速度以及打包速度. 后来看到 Hugo ,号称最快的静态站点生成器后. 尝试搭建博客,发现不管是运行 ...

  9. 使用 Hexo,Material Theme 以及 Github Pages 搭建个人博客

    准备条件 Node.js npm Git GitHub账号 开始搭建 hexo init Blog cd Blog npm install hexo-deployer-git --save npm i ...

随机推荐

  1. jmeter压力测试笔记- HTTP协议

    一.目标 使用jmeter进行HTTP接口压力测试: 命令行方式运行,方便在linux环境运行: 二.面临的问题 支持多环境测试(开发.测试.生产环境) 支持用户数据.线程数.循环次数等配置在运行时自 ...

  2. Linux(二)命令

    Linux命令一.命令基本格式 命令行头部显示字符意义 [root@localhost ~] # root 用户名 localhost 主机名 ~ 当前目录 ~表示home目录 # 用户权限,#表示超 ...

  3. Visual Studio Code搭建python开发环境

    开发Python的环境有很多,原来已经在vs2013上面搭建好python的开发环境了,但是vs2013每次启动都占太多内存(太强大了吧),这下出了vs code,既轻量又酷炫,正好拿来试一试开发py ...

  4. PHPmysqli的 其他函数 从数据库中读出数据并且打印出来

    <?php // 认识其他mysqli其他函数 header( 'Content-Type:text/html;charset=utf-8 '); require 'prepareSrarmen ...

  5. FusionCharts 2D帕累托图

    1.了解帕累托图的特性以及和其他图的共性 2.设计帕累托图页面中引入图的类型以及怎么引入到页面 Pareto2D.html: <!DOCTYPE HTML PUBLIC "-//W3C ...

  6. dojo之FilteringSelect

    1.保证可视框宽度与下拉框宽度一致 forceWidth:'true' 2.控制下拉框的高度 maxHeight:'120'

  7. Linux 系统裁剪笔记 软盘2

    第一步:裁减内核打开终端,输入:cd /usr/src/linux2.4,然后输入make xconfig.现在编译内核正式开始了1.1 "code maturity level optio ...

  8. JavaScript遍历table

    JavaScript遍历table 1.说明      遍历表格中的某行某列,并打印其值 2.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

  9. java.lang.NoClassDefFoundError:org/hamcrest/SelfDescribing

    1.错误描述 java.lang.NoClassDefFoundError:org/hamcrest/SelfDescribing 2.错误原因 将junit-4.11.jar导入到lib目录中,出现 ...

  10. JavaScript控制输入框只能输入非负正整数

    1.问题背景 问题:一个输入框,输入的是月份,保证输入的内容只能是非负正整数 2.JavaScript代码 function checkMonth() { $("month").k ...