用hexo搭建属于自己的博客

2018-03-18  本文已影响321人  你看见皮卡丘了吗

坚持写博客是一件很棒的事，今天我就给大家分享一下如何用hexo搭建一个属于自己的博客网站。

一 准备工作

以下都是以windows 64位系统为例子，其他系统具备相同环境即可

  1. 安装git(用来进行文章的发布)
    访问 https://git-scm.com/download/win，点击 64-bit Git for Windows Setup进行下载
image.png

下载完成之后双击exe文件，之后根据提示一路下一步完成安装即可。

  1. 安装node.js(hexo所需要的环境)
    访问 https://nodejs.org/en/,下载左边的推荐版本
    image.png
    下载完成之后根据提示一路下一步完成安装即可。

以上两个工具安装过程中，都会默认加入到系统的环境变量中，如果没有请手动加入

  1. 安装markdownpad(hexo支持的文章格式编辑器)
    点击 http://markdownpad.com/download.html 进行下载，下载完成一路下一步安装即可。

  2. 安装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进行替代。

  1. 安装hexo
    可以访问 https://hexo.io/ 进行hexo的相关了解。
    可以直接执行以下命令，完成hexo的安装
    cnpm install hexo-cli -g

  2. 安装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的基本命令。接下来我就介绍一下我发布文章的步骤，仅供参考

  1. 首先修改一下scaffolds/post.md模版
image.png

  1. 执行以下命令生成一篇文章
    hexo new 文章名

    image.png

  2. 编写文章，markdown语法此处不再赘述。


    image.png

  3. 编写完成之后执行下述命令，生成静态文件
    hexo g

  4. 执行下述命令，启动本地访问，访问地址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，一般可以通过购买云主机和云服务器解决。不过这都得需要每年支付一定的费用。下面我介绍一下一个免费的方式，让自己的博客也能让人公网访问。

  1. 注册github帐号
    访问http://www.github.com,点击右上角的sign up,然后按照下述步骤注册帐号
image.png image.png image.png

点击start a project，会让你进行邮箱确认，去邮箱确认一下即可。

image.png

帐号注册成功！

  1. 新建项目
    点击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配置成功！

  1. 发布代码到github上
    在仓库首页copy一下仓库的地址
image.png image.png
  1. 在站点配置文件中配置一下仓库的地址
image.png
  1. 发布博客
    首先需要你把本机的密钥配置到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

这样就可以使用自己申请的域名访问自己的博客啦！

上一篇下一篇

猜你喜欢

热点阅读