坚持写博客是一件很棒的事，今天我就给大家分享一下如何用hexo搭建一个属于自己的博客网站。
一 准备工作
以下都是以windows 64位系统为例子，其他系统具备相同环境即可
- 安装git(用来进行文章的发布)
访问 https://git-scm.com/download/win，点击 64-bit Git for Windows Setup进行下载
image.png
下载完成之后双击exe文件，之后根据提示一路下一步完成安装即可。
- 安装node.js(hexo所需要的环境)
访问 https://nodejs.org/en/,下载左边的推荐版本
image.png
下载完成之后根据提示一路下一步完成安装即可。
以上两个工具安装过程中，都会默认加入到系统的环境变量中，如果没有请手动加入
-
安装markdownpad(hexo支持的文章格式编辑器)
点击 http://markdownpad.com/download.html 进行下载，下载完成一路下一步安装即可。 -
安装taobao cnpm
nodejs的依赖都是通过一个npm工具进行管理下载的，但是npm的仓库地址是国外的。国内没有科学上网工具的话，很多依赖下载很慢，或者就根本下载不下来。这就可以通过安装taobao的cnpm来解决。
可以访问 http://npm.taobao.org/进行了解。
进入cmd中，键入以下命令，即可完成安装。
npm install -g cnpm --registry=https://registry.npm.taobao.org
image.png
之后，所以需要用npm下载的依赖，我们都可以通过cnpm进行替代。
-
安装hexo
可以访问 https://hexo.io/ 进行hexo的相关了解。
可以直接执行以下命令，完成hexo的安装
cnpm install hexo-cli -g -
安装hexo发布模块
cnpm install hexo-deployer-git --save
二 初识hexo
以上工作都准备完成的话，可以在cmd中键入下面命令来初始化hexo的目录
hexo init 目录 #目录要是不指定的话，将在当前目录下初始化
cd 目录
npm install
image.png
初始化完成之后，可以看到在指定目录下生成了以下文件
image.png
我们可以通过_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/
# 标题
title: windwest的博客网站
# 副标题
subtitle: windwest的博客网站
# 网站描述
description: windwest的博客网站
作者
author: wangjian
# 语言
language: zh_CN
# 时区
timezone:
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
# 博客全路径
url: http://localhost:4000/blog
# 博客根路径
root: /blog/
# 文章的链接格式，年月日标题
permalink: :year/:month/:day/:title/
# 默认值
permalink_defaults:
# Directory
# 资源文件夹，这个文件夹用来存放内容。
source_dir: source
# 公共文件夹，这个文件夹用于存放生成的站点文件。
public_dir: public
# 标签文件夹
tag_dir: tags
# 归档文件夹
archive_dir: archives
# 分类文件夹
category_dir: categories
# Include code 文件夹
code_dir: downloads/code
# 国际化（i18n）文件夹
i18n_dir: :lang
# 跳过指定文件的渲染，您可使用 glob 表达式来匹配路径。
skip_render:
# Writing
# 新文章的文件名称
new_post_name: :title.md # File name of new posts
# 默认模版
default_layout: post
# 把标题转换为 title case
titlecase: false # Transform title into titlecase
# 在新标签中打开链接
external_link: true # Open external links in new tab
# 把文件名称转换为 (1) 小写或 (2) 大写
filename_case: 0
# 显示草稿
render_drafts: false
# 启动 Asset 文件夹
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: 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
# 每页显示的文章量 (0 = 关闭分页功能)
per_page: 10
# 分页目录
pagination_dir: page
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
# 主题
theme: landscape
# Deployment
## Docs: https://hexo.io/docs/deployment.html
# 部署设置
deploy:
type: #部署类型
repo: #部署的仓库地址
配置文件配置结束，可以访问 https://hexo.io/zh-cn/docs/commands.html 学习一下hexo的基本命令。接下来我就介绍一下我发布文章的步骤，仅供参考
- 首先修改一下scaffolds/post.md模版
image.png
-
执行以下命令生成一篇文章
hexo new 文章名
image.png
-
编写文章，markdown语法此处不再赘述。
image.png
-
编写完成之后执行下述命令，生成静态文件
hexo g -
执行下述命令，启动本地访问，访问地址http://localhost:4000/blog
hexo s
在站点配置文件中，我配置了根目录为/blog/。如果没有配的话，访问地址为http://localhost:4000
在浏览器访问可以看到文章已经发布成功。
image.png
三 更改主题
hexo支持自定义主题，但是让自己去写个主题还是很蛋疼的。好在hexo收录了不少优秀的主题供大家选择。
访问 https://hexo.io/themes/
从中选择自己喜欢的主题下载下来，放在themes目录下即可。比如我选择的是snippet主题。
image.png
点击进入之后可以看到是主题的展示页面
image.png
在右侧看到了仓库地址，点击进入。下载仓库内容到本地
image.png
解压后置于themes目录下，并且重名为snippet
image.png
image.png
然后更改站点配置文件的theme配置为snippet
image.png
然后执行下述命令，再访问浏览器，即可看到主题已经更换成功。
hexo clean #清空生成的静态文件
hexo g #生成新的静态文件
hexo s #开启本地访问
image.png
在主题目录下一般也有一个_config.yml文件，这是用于主题的配置的。
image.png
主题配置的各配置项用途描述可以在下载主题的github仓库中看到，比如我的snippet，https://github.com/shenliyang/hexo-theme-snippet下拉即可看到，不同主题的配置请自行了解
image.png
四 发布博客到github上
上面我们一直都是本地访问，那么如何让别人能通过公网访问呢？
首先要能公网访问的话，得具有公网ip，一般可以通过购买云主机和云服务器解决。不过这都得需要每年支付一定的费用。下面我介绍一下一个免费的方式，让自己的博客也能让人公网访问。
- 注册github帐号
访问http://www.github.com,点击右上角的sign up,然后按照下述步骤注册帐号
image.png
image.png
image.png
点击start a project，会让你进行邮箱确认，去邮箱确认一下即可。
image.png
帐号注册成功！
- 新建项目
点击start a project
image.png
项目名为github用户名.github.io，比如我注册的用户名是windwestyo，那么我的项目名就是 windwestyo.github.io
image.png
点击setting
image.png
下拉到github page配置
image.png
点击 choose theme
image.png
githu page配置成功！
- 发布代码到github上
在仓库首页copy一下仓库的地址
image.png
image.png
- 在站点配置文件中配置一下仓库的地址
image.png
- 发布博客
首先需要你把本机的密钥配置到github上。
在任意目录中右键，点击git bash here,进入gitbash
image.png
键入以下命令，一路回车即可
ssh-keygen
image.png
进入密钥生成的目录，用文本编辑器打开，然后复制里面的全部内容
image.png
image.png
此时再执行以下命令
hexo d -g
image.png
可以看到已经发布成功，这时访问之前设置的项目名，我的是http://windwestyo.github.io
可以看到能够成功访问
image.png
至此，我们已经完成了一个博客的搭建。之后只需要在本地写好文章之后进行发布，就可以让人在公网访问到了。
五 使用自己的域名进行访问
如果你还嫌xxx.github.io的域名不好看的话，可以对github page绑定自己的域名。
以腾讯云购买的域名为例，进入腾讯云控制台->域名管理
选择一个域名后的解析，点击添加纪录
image.png
记录类型 主机记录 记录值 TTL
A @ 192.30.252.153 10分钟(600秒)
A @ 192.30.252.154 10分钟(600秒)
CNAME www github名.github.io 10分钟(600秒)
之后再进入github的setting页面
image.png
然后访问你配置的域名，可以看到域名配置生效
image.png
这样就可以使用自己申请的域名访问自己的博客啦！
网友评论