上一篇博文 Hexo+github 搭建个人博客-环境搭建篇 中, 我们讲解了利用 Hexo 搭建个人博客应该要配置哪些环境
相信大家已经迫不及待的想要知道接下来应该要怎么把自己的博客搭起来了, 下面, 让我们一起见证这奇迹的时刻
. 一初始化博客
首先, 我们需要按照下面的步骤进行博客的初始化:
1) 创建一个 myblog 文件夹, 当然你也可以命名为其他名字, 这里以 myblog 为例
$ mkdir myblog
2) 执行以下命令, Hexo 将会在目标文件夹下建立博客需要的所有文件
$ hexo init
这个时候终端会输出
- INFO Copying data to ~/Documents/workspace/git/myblog
- INFO You are almost done! Don't forget to run'npm install' before you start blogging with Hexo!
同时, hexo-blog 目录下会生成以下文件:
scaffolds : 脚手架, 用于存放我们创建文章时的模版
source : 用于存放我们用 markdown 编写的博文原文件其他静态资源文件
themes : 用于存放主题, 里面有我们博客的默认主题 landscape
_config.yml : Hexo 和站点的配置文件, 里面可以设置博客的名字标题作者链接格式等相关项
3) 执行以下命令进行依赖包安装
$ sudo npm install
执行成功后, hexo-blog 目录下将会增加一个模块
node_modules: 关联保存了将会使用到的 hexo 依赖包
. 二配置博客
当我们的博客初始化完成以后, 接下来要做的就是对其进行个性化的配置了.
为了让大家更好懂, 下面我就以配置博客 小学徒的成长历程 为例进行讲解
2.1 Hexo 设置
这个其实就是博客根目录下的 _config.yml 文件, 主要是对 Hexo 的配置以及站点的相关配置, 下面开始进行分段详细的说明
1) 站点配置
# Site
title: cy 的美好生活 # 网站标题
subtitle: life is beautiful like sunshine! # 网站子标题
description: 这是一个利用 Hexo 搭建的博客 # 网站描述
- author: sihai # 网站作者, 也就是您的名字
- language: zh-CN # 网站使用的语言, 这需要注意: 看你的主题文件下的 language 包下有什么语言包就些什么后面详细说明!
- timezone: # 网站时区 Hexo 预设使用您电脑的时区
2) 网址配置
这个地方一般根据情况修改 url 和 root 即可
- # URL
- url: http://xiaoxuetu.github.io # 博客网址
- root: / # 网站根目录
- permalink: :year/:month/:day/:title/ # 文章的永久链接格式 :year/:month/:day/:title/
- permalink_defaults: # 永久链接中各部分的默认值
注意: 如果你的网站存放在子目录中, 例如 http:// ouyangsihai.github.io/blog, 则将 url 设为 http:// ouyangsihai.github.io/blog, 并且把 root 设为 / blog/
3) 目录配置
这个地方一般直接取默认值不用修改
- # Directory
- source_dir: source # 资源文件夹, 这个文件夹用来存放内容, 例如我们用 markdown 编写的博文
- public_dir: public # 公共文件夹, 这个文件夹用于存放生成的静态博客文件
- tag_dir: tags # 标签文件夹
- archive_dir: archives # 归档文件夹
- category_dir: categories # 分类文件夹
- code_dir: downloads/code # Include code 文件夹
- i18n_dir: :lang # 国际化 (i18n) 文件夹
- skip_render: # 跳过指定文件的渲染, 您可使用 glob 来配置路径
4) 文章配置
这个地方一般直接取默认值不用修改
- # Writing
- new_post_name: :title.md # 新文章的文件名称
- default_layout: post # 预设布局
- titlecase: false # 把标题转换为 titlecase(titlecase 指的是将每个单词首字母转换成大写)
- external_link: true # 在新标签中打开链接
- filename_case: 0 # 把文件名称转换为 (1) 小写或 (2) 大写, 0 表示不变
- render_drafts: false # 显示草稿
- post_asset_folder: false # 启动 Asset 文件夹
- relative_link: false # 把链接改为与根目录的相对位址
- future: true # 显示未来的文章
- highlight: # 代码块的设置
- enable: true
- line_number: true # 是否显示行号
- auto_detect: true # 是否自动监测
- tab_replace: # 将 tab 替换成其他字符串
5) 分类和标签配置
这个地方一般直接取默认值不用修改
- # Category & Tag
- default_category: uncategorized # 默认分类, uncategorized 表示未分类
- category_map: # 分类别名
- tag_map: # 标签别名
6) 日期 以及 时间格式 配置
Hexo 使用 Moment.js 来解析和现实时间, 一般我们直接取默认值不用修改
如果你想修改的话, 可以按照 http://momentjs.com/docs/#/displaying/format/ 中定义的格式进行修改
- date_format: YYYY-MM-DD # 日期格式
- time_format: HH:mm:ss # 时间格式
7) 分页配置
这个地方一般根据自己的需求修改 per_page 设置每页显示的文章数量即可
- # Pagination
- per_page: 10 # 每页显示的文章量, 如果设置值为 0, 则表示禁止分野
- pagination_dir: page # 分页目录
8) 主题配置
一般从这里开始, 都是属于 Hexo 拓展插件的配置了, 下面这段是配置我们博客所要使用的主题名字, 想要获取更多的主题, 可以参考: http://hexo.io/themes/
- # Extensions
- theme: landscape # 主题设置, 默认是 landscape
9) 部署配置
这一块涉及到博客发布, 将在下一篇博文中统一进行讲解, 这里可以先不用修改配置
- # Deployment
- deploy:
- type: # 设置发布类型, 如 git,rsync
2.2 主题设置
这个其实就是 themes/{主题名称}/_config.yml 文件了, 主要是网站主题的一些配置, 如需要显示的菜单开启的组件等等
不同的主题, 都会增加了自己的一些特别开关, 下面只以默认主题为例进行讲解
1) 菜单配置
这里主要是对博客显示的菜单项的访问路径进行配置,
- menu:
- home: / || home #首页
- categories: /categories/ || th #分类
- archives: /archives/ || archive #归档
- tags: /tags/ || tags #标签
- about: /about/ || user #关于
- #schedule: /schedule/ || calendar
- #sitemap: /sitemap.xml || sitemap
- #commonweal: /404/ || heartbeat
2) 显示内容配置
这里主要对博客显示的内容进行设置, 比如查看全文的按钮文本显示
# Content
excerpt_link: 阅读全文 # 设置查看全文的按钮显示文本
fancybox: true # 是否开启弹出层效果
3) 侧边栏配置
主要是对侧边栏展现进行设置
- # Sidebar
- sidebar: right # 侧边栏展示的方向
- widgets: # 侧边栏添加的组件配置
- - category # 显示分类
- - tag # 显示标签
- - tagcloud # 显示标签云
- - archive # 显示归档
- - recent_posts # 显示最近发布
4) 其他
第 1 点 和 第 2 点 都是大部分主题通用的配置, 下面这些就是比较定制化的了除了下面列出的, 国内大部分主题都还会添加了百度统计的 ID 配置多说的 ID 配置 Jiathis 分享活着百度分享的配置等等
具体我们依旧是只讲解默认主题里面的
- # Miscellaneous
- google_analytics: "UA-********-1" # 谷歌统计的 ID 配置, 如果你没有用到, 可以为空
- favicon: /favicon.png # 网站图标路径
- twitter: # twitter 配置
- google_plus: # google plus 配置
- fb_admins: # facebook 配置
- fb_app_id:
至此, 我们博客的 Hexo 配置 和 主题配置 都完成了
. 三创建博文 - Hello Hexo
当我们的博客个性化配置完成后, 我们一起来看下如何创建我们的第一篇博文-Hello Hexo.
1) 进入到博客的根目录, 执行以下命令生成新的博文
$ hexo new hello-hexo # 格式是: hexo new {文章名}
命令执行成功后, 你就会发现在 source/_posts 目录下多了一个文件 hello-hexo.md
前面我们已经说到, 我们的博文使用 markdown 语法进行编写的, 后面的博文我会详细的进行 markdown 语法的讲解
接下来, 打开这个文件, 我们可以看到以下内容:
- ---
- title: hello-hexo
- date: 2015-09-03 00:08:30
- tags:
- ---
他们的含义是:
title : 文章的标题
date : 该文章的创建时间
tags : 该文章的标记 tag
下面我们可以更改成
title: 你好, Hexo
- date: 2015-09-03 00:08:30
- tags:
- - hexo
- ---
这是我的第一篇博客, 你好, Hexo
到这里, 我们的第一篇博客编写完毕
. 四浏览博客效果
经过了重重困难, 我们终于配置好了我们的博客深呼吸一口气, 让我们一起来见证奇迹的时刻
打开终端, 在我们的 myblog 目录下执行以下命令
$ hexo s # 等同于 hexo server , s 其实就是 server 的缩写
执行成功后, 控制台将会输出
INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.
sihai
打开浏览器, 我们可以看到我们用 Hexo 搭建好的使用默认主题的博客展现效果
下面是我的 next 主题的博客, 目前是默认主题, 后面的博客将介绍如何更换主题:
sihai
. 五 结束语
在这篇博客里, 我们了解到了以下内容:
如何进行博客的配置
如何进行主题的配置
如何创建我们的第一篇博客
如何预览我们的博客效果
来源: https://mp.weixin.qq.com/s?__biz=MzI2OTQ4OTQ1NQ==&mid=2247483837&idx=1&sn=70ad8269910dde8464df893128cc9ab7&chksm=eadec5fddda94ceb35e80f87da807fad32d11f952c4504ed1b252164557c345be6c8676b3d34#rd