专栏首页IT 指南者专栏基于 Hexo + GitHub Pages 搭建个人博客(二)

基于 Hexo + GitHub Pages 搭建个人博客(二)

点击文章底部“ 阅读原文 ”,围观我基于 Hexo + GitHub Pages 搭建的个人博客。

基于 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 文件,想了解的可以前往官网学习下:

https://www.thymeleaf.org/

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

hexo server

注:如果想查看配置后的信息是怎样的,可访问我已经搭建好的博客查看,博客地址为:

https://compassblog.github.io/

(点击文章底部“ 阅读原文 ”,直接访问)

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

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

  • NexT 主题官方下载地址:

https://github.com/iissnan/hexo-theme-next

  • Hexo 博客其他主题下载地址:

https://hexo.io/themes/

  • NexT 主题官方使用文档地址:

http://theme-next.iissnan.com/

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 基本语法的网址:

http://wowubuntu.com/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 都需要在 Git Bash 窗口上执行下面的命令:

  • Hexo clean
  • Hexo g
  • Hexo d

推荐阅读:我对软件工程这门课的理解

每一步成长,都想记录与分享

本文分享自微信公众号 - compassblog(gh_7303ea249902)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-03-23

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 基于 Hexo + GitHub Pages 搭建个人博客

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

    compassblog
  • 将 Hexo 个人博客同时部署到 GitHub 和 Coding 上

    关于如何快速搭建自己的个人博客,如何完善自己的个人博客,什么是 GitHub ,如何将自己的博客代码托管到 GitHub 上面等等问题,我之前写过三篇文章已经做...

    compassblog
  • 将 Hexo 个人博客同时部署到 GitHub 和 Coding 上

    关于如何快速搭建自己的个人博客,如何完善自己的个人博客,什么是 GitHub ,如何将自己的博客代码托管到 GitHub 上面等等问题,我之前写过两篇文章已经做...

    compassblog
  • Hexo-完全免费全平台搭建个人博客(1)-整体搭建

    2017-03-0911:04:17 发表评论 2,405℃热度 几个月前就想写这篇文章了,很多人也让我写过,也帮很多人搭建过,但是一直没时间纪录下来,这次有...

    timhbw
  • 搭建个人博客-hexo+github详细完整步骤一、第一步:下载安装Git二、第二步:下载安装node.js三、第三步:安装hexo四、第四步:初始化Hexo五、部署到Github上六、最后加上一些文

    自己也算是摸爬滚打搭建成功,然后自己再重新安装部署一遍,把完整步骤分享给大家,同时最后有一些连接,如果我的步骤不行,大家可以参考其他人的(这个有点花费时间,大家...

    致Great
  • 在 Ubuntu 14.04 服务器上部署 Hexo 博客

    本文将介绍如何在一台 Ubuntu 14.04 的 CVM 云服务器上快速部署 Hexo 博客站点,如何快速发布一篇博文并通过云服务器上的私有 Git 仓库部署...

    EarlGrey
  • 搭建个人博客网站Github、Hexo与Next

    过年回家前在公司的最后一天,说实话有点心不在焉了。整个2017也就这样恍然过去,很多事都来不及回想。在这最后的时间里,想起把自己使用Hexo搭建个人博客网站的流...

    梧雨北辰
  • 个人博客案例

    很多人都希望能有自己的博客,但是搭建一个博客需要大量的人力物力,比如说,需要一台一天24小时运行的服务器,需要购买一个域名,备案,自己需要运维服务器,需要繁重的...

    worker
  • UI设计中的软件知识

    最近挺想学学UI的,因为我们公司没有UI,所以做页面都是全靠摸索,老是被领导说没有审美[捂脸]

    彼岸舞
  • Android开发学习-Android UI框架

    今天看到一套好看,好用的Android UI框架,分享给大家。 QMUI Android UI 一个旨在提高 UI 开发效率 快速产生项目 UI 的前端框架 ...

    程序源代码

扫码关注云+社区

领取腾讯云代金券