基于GithubHexo的个人博客搭建过程

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新......

github:https://github.com/Daotin/Web

微信公众号:Web前端之巅

博客园:

在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!

基于GithubHexo的个人博客搭建过程

一、个人博客的搭建过程 1、常见个人博客搭建方案

搭建个人博客一般有三种方式:

WorkPress:一般需要独立域名(收费),对 MarkDown 不友好

GitHubPages + Jekell:免费,稍微有点麻烦

GitHubPages + Hexo:免费,使用简单,使用者众多(我们接下来要介绍的博客的搭建就是基于这种方式。)

2、Hexo简介

Hexo 是一个基于 Nodejs 的静态博客网站生成器,作者是来自 台@@湾 的 Tommy Chen

Hexo官网:https://hexo.io/

特点:

不可思议的快速 ─ 只要一眨眼静态文件即生成完成

支持 Markdown

仅需一道指令即可部署到 GitHub Pages 和 Heroku

已移植 Octopress 插件

高扩展性、自订性

兼容于 Windows, Mac & Linux

3. 博客搭建正式开始

(1)创建一个github仓库:Create a new repository.

(2)注意 Respository name 中一定要输入:你的用户名.github.io。其他地方不用修改,然后直接点 ”Create repository“ 按钮完成创建即可。

基于GithubHexo的个人博客搭建过程

(3)本地环境搭建:

安装Git,步骤省略。

安装Nodejs,步骤省略。

安装Hexo,打开官网:

基于GithubHexo的个人博客搭建过程

是不是很简洁,只有一条指令!而且我们只需要使用windows的cmd就可以下载安装。

打开cmd,输入指令:

npm install hexo-cli -g

Hexo安装完成,是不是超简单_

4、 创建本地博客

在cmd里面定位到你想保存博客的文件夹(我的位于 G:/Blog/ 目录下)

用cmd定位到这个文件夹下:

基于GithubHexo的个人博客搭建过程

之后,使用以下指令创建本地博客:

hexo init 你的用户名.github.io // 建议和创建仓库时使用同一个,我的是Daotin.github.io 5、 Next主题的安装

经过上面步骤创建完本地博客之后,基本的博客系统就已经搭建好了,自带了 landscape 主题。不过该主题不是很符合我的审美,在网上搜索了一下 Hexo 主题,选择了用户量较大的 Next。

Next 是 iissnan 在 GitHub 上开源的一个 Hexo 主题,主打简洁,但是功能齐全,使用者众多。

”说明:“在 Hexo 中有两份主要的配置文件,其名称都是 _config.yml。 其中,一份位于站点根目录下(即 xxx.github.io 目录下),主要包含 Hexo 本身的配置;另一份位于主题目录下,这份配置有主题作者提供,主要用于配置主题相关的选项。为了描述方便,在以下说明中,将前者称为 “站点配置文件”, 后者称为 “主题配置文件”。

看下怎么安装Next主题:

cmd 下切换到本地 Daotin.github.io 目录下,之后输入如下指令:

git clone https://github.com/iissnan/hexo-theme-next themes/next

之后我们就可以在 Daotin.github.io\themes\ 下看到 next 主题文件夹:

基于GithubHexo的个人博客搭建过程

6、使用Next主题

首先,复制一份打开本地博客目录下的 _config.yml 文件,命名为 _config.yml.bak,做为备份,以防改错。然后,使用文本编辑器打开本地博客目录下的 _config.yml 文件,搜索,定位 theme 键值,将原本的 theme 的值注释掉,新建一个新的 theme 值为 next.

theme: next

注意:该配置文件中的键值之间一定要有空格,否则轻则没有作用,重则报错,无法启动。

7、 站点配置文件基本项修改

这里先看看最基础的配置,也就是必须要改动的:

title: xxx # 博客的名字,也称站点名称 author: xxx # 作者名字 description: xxx # 对站点的描述,搜索引擎会抓取,可以自定义(这个还是加上比较好) language: zh-Hans # 语言 简体中文 theme: next # 配置主题 deploy: # 部署相关配置 type: git # 使用 Git 提交 repo: https://github.com/Daotin/Daotin.github.io.git # 就是存放博客的仓库地址

上述配置是必须要修改的,再次强调,键值之间一定要 ”加空格“,请在文本编辑器中搜索定位后再修改。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zzpwjg.html