logo头像
Snippet 博客主题

hexo快速搭建自己的免费博客

Hexo是快速、简洁且高效的博客框架,是不是我们每个前端开发人员都有一个建立自己博客的梦,是不是很多人都是想做,却始终都没有行动起来呢?

博客带给我们的优势是偶尔看到一些东西想做点笔记,但是每次写的东西都会到处放,下次需要的时候半天都找不到,是不是挺浪费时间的。下面我将介绍怎么快速又方便的搭建属于自己的博客。

hexo主题特别多,总有一款适合你。

前提条件:

安装过git和nodejs的直接跳过步骤1和步骤2。


1、安装git

  • Windows:下载并安装 git.
  • Mac:使用 Homebrewbrew install git ; 或下载安装程序安装。
  • Linux (Ubuntu, Debian):sudo apt-get install git-core
  • Linux (Fedora, Red Hat, CentOS):sudo yum install git-core

2、安装nodejs

安装 Node.js 的最佳方式是使用 nvm。

  • cURL:
    $ curl https://raw.github.com/creationix/nvm/master/install.sh | sh
  • Wget:
    $ wget -qO- https://raw.github.com/creationix/nvm/master/install.sh | sh

安装完成后,重启终端并执行下列命令即可安装 Node.js。

  • $ nvm install stable

或者也可以下载 安装程序 来安装。对于windows用户来说,建议使用安装程序进行安装。安装时,请勾选Add to PATH选项。


3、安装hexo,创建默认主题的博客

windows的cmd命令窗口,mac的终端一直是我门前端离不开的小黑窗,我们需要习惯用命令行去完成需要做的事情。

  • $ npm install hexo-cli -g
  • $ hexo init blog
  • $ cd blog

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    介绍下生成目录结构文件夹:
    yourname
    |-- node_modules:是依赖包
    |-- public:存放的是生成的页面
    |-- scaffolds:命令生成文章等的模板
    |-- source:用命令创建的各种文章
    |-- themes:主题
    |-- _config.yml:整个博客的配置
    |-- db.json:source解析所得到的
    |-- package.json:项目所需模块项目的配置信息
  • $ npm install

  • $ hexo server

按照步骤完成,在浏览器输入 http://localhost:4000 是不是就可以看到hexo默认主题的样子:
hexo最初的样子


4、关联github

通过 GitHub 的 pages 功能,我们可以把我们的博客托管到 GitHub ,而无需去购买云服务器,让互联网都能访问自己的博客。

1, 没有github账号的首先创建账号,有账号的我们继续。创建一个repository,名称为yourname.github.io,至于为什么需要这样的名称,可以直接当成域名访问,这里不重点介绍区别了。

创建一个repository

2, 点击settings,去选择master branch,然后save。

选择setting
选择master branch

3, 复制你的项目链接。( 注意使用的是Clone with HTTPS )

复制自己项目地址链接

4, 打开blog项目,修改 _config.yml 文件的一些配置(注意冒号之后都是有一个半角空格的),完成关联。

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: https://github.com/shengzhong5566/shengzhong5566.github.io.git
branch: master

5、本地项目推送到 GitHub 托管

安装 $ npm install hexo-deployer-git --save 插件,实现生产本地生产文件及推送功能。

推送到 GitHub 托管执行命令(建议每次都按照如下步骤部署,这里后面的字母是generate、deploy的简写)

  • $ hexo clean
  • $ hexo g
  • $ hexo d

推送的过程会出现让你输入用户名和密码,这里用户名就是github用户名,密码就是github的密码。如果不想输入用户名和密码则可以配置SSH key。后续文章会介绍


6、选择适合自己的主题

hexo初始化之后默认的主题是landscape,然后可以到点击这里去找自己想要的主题。克隆下来放到themes文件夹中,注意文件夹名则是设置主题的名字。这里用next主题为例:

完成后确保themes文件夹里有了next与landscape同级。 这里下载主题方式很多,可以下载到其他地方,再拷贝到themes文件夹里。

再修改根目录下的 _config.yml 文件配置:

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

  • $ hexo clean
  • $ hexo g
  • $ hexo s

本地服务启动后,可以在浏览器输入 http://localhost:4000 预览。确定无误后执行

  • $ hexo d

7、绑定域名

博客已经搭建好,也能通过github的域名访问,大部分人还是想用自己的域名。将自己的域名绑定到github这个博客项目上。我这里用的是腾讯云上买的域名作为案例。

1,github官网提供的两个主机ip地址:192.30.252.153192.30.252.154
将这两个作为主机地址,给域名的DNS解析添加两个 A记录,( 这里使用新手快速添加,填入ip地址即可快速完成 )然后再添加一个 CNAME记录 主机地址填的是我原本用来访问github博客的地址: shengzhong5566.github.io ,添加完成后如下:

域名解析

2,在hexo本地目录 source 目录下面新建一个文件,取名为CNAME文件 (无后缀),内容就是上面所说到的自己的域名

CNAME文件:

1
weblogger.club

此时记得我第4步的关联github,在设置中如果有自己的域名设置。


8、新建文章并同步到github上

  • $ hexo new 'welcome'

执行命令后,在source文件里的_posts下就多了一个 welcome.md , 此时就可以使用markdown语法进行编写。
然后 hexo s 进行预览,如果已经完成,并想发布到github上,则:

  • $ hexo clean
  • $ hexo g
  • $ hexo s

9、几个我们需要设置的地方

1, README.md不需要编译成README.html

修改根目录下的 _config.yml 文件配置:

1
skip_render: README.md

2, 如果发不上去,有文字,但是样式和图片失效,则是路径需要设置

1
2
3
4
5
6
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://shengzhong5566.github.io
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

3, 网站标题,网站语言设置

1
2
3
4
5
6
7
8
9
10
11
12
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: 声钟博客
subtitle:
description:
keywords:
author: 杨声钟
language: zh-CN
timezone:

微信打赏

赞赏就是肯定