梦在这里腐了朽剩流泪
  2. Blog

在自己的学习生涯中，记录下你的过程，是一件很适意的事情。搭建一个只属于你的博客，就像是一个记事本，记录下你的生活，任何你需要分享的事，总需要有一件事来满足自己虚荣！！—>Newt

首先，声明下：该篇博客以（5分钟 搭建免费个人博客）和（手把手搭建个人博客（图文教程））两篇为参考，也算是我个人的一个总结，希望小伙伴们减少一些不必要的错误。

Preface

上面提到的其中一篇博客提到过，使用初始的虚拟机进行搭建，后面博主也会出相关的建议博客，请继续关注。而本篇博客是基于GitHub Pages的免费搭建，完全不需要付费。本篇从零开始，期待大家都拥有属于自己的博客！！！

Advantage

  • 生成静态页面简单
  • 支持 Markdown（减少了令人头疼的排版）
  • 部署简单，日常使用仅需五个命令
  • 插件提供
  • 扩展性强
  • 文档全面

Build

Environmental Science

  • 拥有GitHub账号（重要）
  • Git
  • Node
  • Hexo

GitHub

  • 注册

  • 创建一个属于自己的库

Git

  • 创建完自己的库之后，下面就是要让电脑克隆自己所创建的库，为了方便电脑上的代码发布静态页面到GitHub上创建的仓库当中。

  • 首先要安装一个git，下面就简单描述一些配置。

    • 首先进入GitHub官网，下载适合自己电脑的版本

    • 在安装过程中直接默认选项即可（小小的偷个懒，要想详细安装，请参考网络）。

    • 在本地创建一个ssh key ，目的是在你电脑上获得一个密匙关联到GitHub上，方便随时上传你的代码。

      1
      2
      $ ssh-keygen -t RSA -C "user@123.com"		//生成公钥，私钥
      $ cat .ssh/id_rsa.pub 						//查看公钥

  • 在GitHub上找到setting –> SSH and GPG keys –> New SSH key,拷贝上去，就创建好了！！

  • 检查是否绑定

    1
    $ ssh -T git@github.com

  • 添加全局变量的配置

    1
    2
    $ git config --global user.name "your name"			//设置全局属性
    $ git config --global user.email "your_email@email.com"

Node

  • 安装Node.js

Hexo

  • 安装Hexo客户端

    1
    $ npm install hexo-cli -g

Init

  • 创建站点
  • 安装主题
  • 修改基础配置
  • 编写文章
  • 测试
  • 发布到GithubPages
  • 访问博客

Hexo structure

1
2
3
4
5
6
7
8
9
.
├── _config.yml
├── package.json
├── scaffolds
├── public
├── source
	└── _posts
└── themes
	└── landscape	更多请看官网

_config.yml

采用YAML语法格式，全局配置文件。网站很多的配置在这里：网站名称,副标题,网站描述,作者,语言,主题,部署地址等参数。官方配置：戳我。

package.json

hexo框架的参数和依赖的插件

scaffolds

脚手架，当创建一篇文章的时候，hexo根据该目录下的文件进行建构。

public

所有文件生成的html静态文件等存放的目录。执行hexo g 进行静态文件的生成

source

新建的博文都存放在该目录下。

_posts：在该目录下新建博文（HelloWorld.md）。存放的都是markdown文件，可以直接进行编辑

themes

网站的主题目录，hexo具有很好的拓展，主持很多的主题风格。

landscape：hexo默认的主题，不再_config.yml中进行主题配置默认使用。

可以自己挑选喜欢的主题：hexo主题选择！！

create hexo

将下面的username替换成你的username（强迫症患者），执行下面的命令，创建username.github.io 的文件夹，并进行hexo的初始化。username.github.io中包含以上提到的hexo文件。

1
$ hexo init username.github.io

Install Theme

推荐几个不错的主题：

进入hexo的主题选择，找到自己喜欢的主题，然后点击进去找到该主题的github，然后拷贝主题的仓库地址，执行命令，安装成功。具体请看下面的图片详解：

1
2
$ cd username.github.io			//进入文件夹
$ git clone https://github.com/SuperKieran/TKL themes/TKL //将此处主题仓库地址替换上面copy的地址，															克隆到themes下的TKL（主题）文件夹内

Modify Configuration

使用编辑器打开_config.yml修改一下内容，注意：键值对之间使用空格分开

项目配置

1
2
3
4
5
6
7
title: newt   		  //博客标题
author: dimsky   	  //作者名字
language: zh-Hans     //中文
theme: TKL            //主题名称（重要，上一步安装的主题文件夹）
deploy:
  type: git      	  //使用Git进行发布
  repo: https://github.com/username/username.github.io.git    // 自己创建的Github仓库地址

主题配置

在安装的主题文件夹中，也有_config.yml配置文件，一般根据主题进行配置

Writing Articles

到现在为止，框架的搭建已经完成了，可以开始你写博客了，在username.github.io/source/_posts下创建HelloWorld.md文件，先熟悉下MarkDown语法，赶快开始你的HelloWorld吧！！

1
2
3
4
5
6
7
8
---
title: Hexo搭建博客（进来你不会后悔）
description: 搭建博客
date: 
tags:
- blog
---
Welcome  to  my   Blog

Test

输入一下的命令就可以访问你的博客了，在浏览器中输入，若没有出现，请查看端口占用情况，若你的电脑上安装 福昕阅读器 ，没错就是它，它占用了4000端口，卸载它你就可以访问啦。或者使用第二个命令。

1
2
$ hexo s					//默认端口4000，访问地址 https://localhost:4000 
$ hexo s -p 5000 			//设置指定端口，访问地址 https://localhost:5000

GithubPages

第一次部署，终端会提示你输入Github的邮箱和密码，输入正确后，稍等片刻，就会把你的博客发布到GithubPages站点上，之后每次写完博客，执行下面第二个命令，就可以直接发布了！！

1
2
$ npm install hexo-deployer-git --save		//安装自动化部署工具
$ hexo clean && hexo g && hexo d			//清理静态文件 && 生成静态文件 && 部署

Visit

在浏览器的地址栏上输入：https://username.github.io/。就大功告成了！！有什么要讨论的，欢迎和我沟通！！

TAGS