Hexo+github搭建个人博客－博客初始化篇

文章推荐

精选java等全套学习资源
精选java电子图书资源
精选大数据学习资源
java项目练习精选

上一篇博文 [《Hexo+github搭建个人博客－环境搭建篇》](http://blog.csdn.net/sihai12345/article/details/79305938) 中，我们讲解了利用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）站点配置

1 # Site
2 title: cy的美好生活    # 网站标题
3 subtitle: life is beautiful like sunshine!    # 网站子标题
4 description: 这是一个利用Hexo搭建的博客    # 网站描述
5 author:  sihai   # 网站作者，也就是您的名字
6 language: zh-CN   # 网站使用的语言,这需要注意：看你的主题文件下的language包下有什么语言包就些什么。后面详细说明！
7 timezone:         # 网站时区。Hexo 预设使用您电脑的时区。

2）网址配置

这个地方一般根据情况修改 url 和 root 即可。

# URLurl: 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 & Tagdefault_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 设置每页显示的文章数量即可。

 # Paginationper_page: 10                      # 每页显示的文章量，如果设置值为0，则表示禁止分野pagination_dir: page              # 分页目录

8）主题配置

一般从这里开始，都是属于Hexo拓展插件的配置了，下面这段是配置我们博客所要使用的主题名字，想要获取更多的主题，可以参考：http://hexo.io/themes/

 # Extensionstheme: landscape    # 主题设置，默认是 landscape

9）部署配置

这一块涉及到博客发布，将在下一篇博文中统一进行讲解，这里可以先不用修改配置

 # Deploymentdeploy: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）显示内容配置

这里主要对博客显示的内容进行设置，比如查看全文的按钮文本显示。

 # Contentexcerpt_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-hexodate: 2015-09-03 00:08:30tags:---

他们的含义是：

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.

打开浏览器，我们可以看到我们用Hexo搭建好的使用默认主题的博客展现效果。
下面是我的next主题的博客，目前是默认主题，后面的博客将介绍如何更换主题：

###五、结束语

在这篇博客里，我们了解到了以下内容：

如何进行博客的配置
如何进行主题的配置
如何创建我们的第一篇博客
如何预览我们的博客效果

文章有不当之处，欢迎指正，你也可以关注我的微信公众号：好好学java，获取优质资源。

Hexo+github搭建个人博客－博客初始化篇相关推荐

HEXO+Github,搭建属于自己的博客
hexo是一款基于Node.js的静态博客框架, hexo github链接 ,这篇教程是针对与Mac的,参考链接,由于原文讲到的hexo是以前的老版本,所以现在的版本配置的时候会有些改动. 之前是想 ...
2 - Hexo + GitHub 搭建博客
使用 Hexo + GitHub 搭建一个好看的博客一.第一篇博客 1 cd ~/Desktop 2 在 GitHub 上新建一个空 repo,repo 名称是「你的用户名.github.io」 3 ...
Hexo+github搭建个人博客－博客发布篇
通过 Hexo+github搭建个人博客-环境搭建篇以及 Hexo+github搭建个人博客-博客初始化篇 ,我们了解到了利用Hexo搭建个人博客需要的环境以及配置,下面这篇文章将会介绍如何把我们的 ...
Hexo+github搭建个人博客－环境搭建篇
一.概述我们使用Hexo + Github搭建个人博客,我们自然不能错过,事不宜迟,我们现在立马来认识一下,他们究竟是何方神圣吧. 1.1 关于 GitHub 1.1.1 Github 接触编程一段 ...
vsphere通用配置_Mac环境下如何用Hexo+Github搭建个人博客
一个爱折腾的人,总是忍不住去自己动手尝试新鲜事物.就拿写博客来说,虽然网上已经提供了很多博客平台,但是总有一些个性化的需要得不到满足.所以就抽空去网上找了下如何使用Hexo+Github 搭建自己博客 ...
教你如何使用hexo以及nginx、github搭建属于自己的博客（操心的妈妈级教学）
教你如何使用hexo以及nginx.github搭建属于自己的博客(妈妈级教学) ~~ 1.解释一下你要的服务器的效果以及对应的操作 ~~ 首先你要有自己的一台服务器,可以是云服务器,或者你可以用自己 ...
hexo部署成功但是没效果_使用 Hexo+GitHub 搭建个人免费博客教程（小白向）
前言近些年来很多用户都喜欢使用 GitHub Pages 来搭建 Hexo 静态博客网站,其最吸引人的莫过于完全免费使用,并且非常稳定. 虽然搭建时比较麻烦,有点折腾,但是配置完成后,基本不需要操心 ...
利用 Hexo + Github 搭建自己的博客
扯在前面在很久很久以前,一直就想搭建属于自己的一个博客,但由于各种原因,最终都不了了之,恰好最近突然有了兴趣,于是就自己参照网上的教程,搭建了属于自己的博客. 至于为什么要搭建自己的博客了?哈哈,大 ...
win10+hexo+github搭建个人博客
win10+hexo+github搭建个人博客参考:https://hexo.io/,博客用于记录自己的学习工作历程参考以下步骤安装 1.搭建环境准备(包括node.js和git环境,gitHub ...

Hexo+github搭建个人博客－博客初始化篇

Hexo+github搭建个人博客－博客初始化篇相关推荐

最新文章

热门文章