Hexo博客搭建

Posted on   |     |   Views

Hexo+github可以随心所欲的部署属于自己的博客。

Hexo 博客搭建步骤

搭建博客，首先需要安装 node 环境；

  • 测试安装成功与否：打开终端，输入 node -v, 有输出版本结果则安装成功。
  • 安装node环境的时候，已经自动安装了 npm 命令行工具，不需要单独安装。
  • 可以通过 npm -v 测试npm是否可用

npm 是一个用来安装和管理 Node 包和前端包的一个工具。

npm 的两层含义

  • npm网站：https://www.npmjs.com/
    • 一个提供了一个用来共享或者检索的一个平台
    • 二是托管 node 环境或者浏览器环境用到的一些第三方包
  • 是一个命令行工具，可以用来下载 npm 网站上托管的包
    • CLI：Command Line Interface 命令行接口
    • GUI：图形化接口

npm 基本使用

本地安装

1
$ npm install [--save] 包名

一般是在项目中，安装项目使用的依赖包,就可以在终端中，切换到项目的根目录，然后执行 npm install 包名，npm 工具会自动将这个包下载下来然后放到 node_modules 目录中。node_modules 目录如果不存在会新建，如果已存在，则直接将下载的包放到该目录中。

包说明文件：package.json

包说明文件其实就是一个产品的说明书：package.json 文件。该文件一般只存在于项目的根路径下，可以通过 npm init 命令使用向导的形式创建该文件。

该文件中描述了项目的一些元数据，例如 name、version、author 等信息。

其中有一个非常重要的属性，叫做：dependencies，该属性是一个对象，里面保存了当前项目的依赖项，该字段一般不要手动修改，它需要结合 npm install --save 包名 来使用，只要在安装的时候加上 --save 参数就会自动将包依赖项添加到该属性中，很方便。

甚至还可以完全把 node_modules 目录删除掉，只要 package.json 文件还在，就可以执行 npm install 安装包说明文件中的所有的依赖项。执行 npm install 命令的时候，它会自动查询当前目录下的 package.json 文件，然后找到里面的 dependencies 属性，依次下载到 node_modules 目录下。

建议使用 npm 的时候，都先初始化一个 package.json 文件，然后安装包的时候最好都加上 --save 参数，将依赖项添加到包说明文件中。

全局安装

全局安装：一般用于安装一些命令行工具（这些工具也是基于Node开发的。）

全局安装使用 npm install --global 包名（工具名），在任意目录执行该命令都可以。

1
npm i -g hexo-cli

可以通过 npm root -g 查看全局包安装目录。

安装 git 环境；

下载地址：

初始设置

1
2
$ git config --global user.name "yourname"
$ git config --global user.email "your_email@example.com"

全局安装 hexo-cli

在终端的任意目录输入 npm install -g hexo-cli 然后回车执行等待全局安装成功

通过输入 hexo --version 如果看到输入一大堆的版本号就说明安装成功了，Hexo 是一个命令行应用程序

初始化一个博客存储目录

通过输入 hexp init 博客项目存储目录

Hexo 会在执行该命令的目录下生成一个博客项目，初始化博客项目的过程需要联网

通过终端进入刚才创建的博客项目目录，然后在该目录下输入 npm install 回车等待执行结束

启动本地服务器，查看博客内容

输入 hexo server 回车执行，这一执行会在本地启动一个服务器，然后通过 http://localhost:4000 就可以访问创建的博客项目

创建博文

进入博客项目，输入 hexo new 文章名称 创建博客

这个命令会自动在 source/_posts/ 目录下生成一个 文章名称.md 文件

生成静态文件：hexo generate

该命令会自动在项目的根目录下的 public 目录下降静态文件放进去

配置主题页

根据我个人所选的主题介绍。进入博客根目录，打开_config开始配置，注意：在配置主题页的时候需要图片的url，需要在七头云CDN注册；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
# Site
title: HongqinMa  # 配置博客标题
subtitle: "博客标签"
description: "马红琴在 Github 上的个人博客"
author: Hongqin Ma
header-img: //ofy7k3v4s.bkt.clouddn.com/mbanner.png  #
email: hongqin_ma@126.com  # 邮箱地址
keyword: Hiraku, HongqinMa, javascript, html, css, nodejs  #SEO搜索引擎查找关键词
favicon: //ofy7k3v4s.bkt.clouddn.com/mylogo.png  # 博客网站图标
# RSS:
weibo_username: Hiraku_Ma #微博账户名
zhihu_username: HirakuMa #知乎账户名
github_username: HongqinMa #github账户名
twitter_username: HongqinMa #Twitter账户名
facebook_username: Hiraku #Facebook账户名
sidebar-about-description: 拼着一切代价，奔你的前程。 # 侧边栏签名
sidebar-avatar: http://ofy7k3v4s.bkt.clouddn.com/photo.jpg # 侧边栏头像
cdn-url: "https://ofy7k3v4s.bkt.clouddn.com/" # 我写的是七头云的域名地址
theme: hexo-theme-Anisina  # 主题名称
friends: [
  {
    title: "掘金",
    href: "http://gold.xitu.io/"
  },
  {
    title: "segmentfault",
    href: "https://segmentfault.com/"
  },
  {
    title: "简书",
    href: "http://www.jianshu.com/users/1cbb94e5ed4d/latest_articles"
  },
  {
    title: "七牛云",
    href: "https://portal.qiniu.com/"
  },
  {
    title: "博客园",
    href: "https://home.cnblogs.com/"
  },
  {
    title: "Awesomes",
    href: "https://www.awesomes.cn/"
  }
]
duoshuo_username: Hiraku #这里需要注册多说或者主题作者：haojen Ma 文档中的另外一种，作用都一样 ，用来评论的；
deploy: 
  type: git # 快速部署
  repo: https://github用户名:github密码@github.com/HongqinMa/HongqinMa.github.io.git

快速部署

  1. 修改配置文件
  2. 在项目根路径下执行 npm install hexo-deployer-git --save 该命令
  3. 接下来就可以直接输入 hexo deploy --generate 自动发布到 github 上

更详细介绍如下：

配置主题页说明

OK，现在可以直接通过HongqinMa.github.io.git访问博客了。

感谢您的支持！