Fork me on GitHub
KISS

KEEP IT SIMPLE AND STUPID


  • Home

  • About

  • Tags

  • Categories

  • Archives

HEXO搭建及主题配置

Posted on 2018-06-05
Words count in article: 2,101 字

如何搭建属于自己的静态博客

看别人都有自己的私有博客,而且页面也相当美观,自己甚是羡慕。所以就在网上找了许多的资料,发现许多人都在用 hexo 作为自己博客的框架,所以自己也尝试者在本地搭建一个
属于自己的私人博客。可以在自己没事的时候,发发牢骚;也可以记录自己在学习的路上所遇到的问题,及自己的解决方案。
以下就是本人自己搭建私有博客时的步骤,和自己所遇到的坑,以及填坑的过程;想来想去就拿这次的经历作为自己第一次的博客写作内容吧!!!本来是想在自己 kali linux 上安装
的,结果就稀里糊涂的在 win10 上安装了(尴尬ing)!!! 如果以下文章对你有点帮助,别忘了star一下,https://github.com/NEOscavenger00 ^_^

一、使用Hexo和GitHub来部署自己的博客

1.前期准备工作

(1)、安装node.js

安装nodejs是为了生成静态页面,因为hexo是一款基于Node.js的静态博客框架。到Node.js官网下载相应平台的最新版本,这里给个链接@nodejs,nodejs
一路按安装即可。
安装成功后,打开 cmd (win终端,快捷键是 ctrl + r 输入 cmd ) cmd 查看是否安装成功; cmdnode 如果没有成功有可能需要手动配置 nodejs 的环境变量,如何配置
这里就不再赘述了。网上资料有很多。

(2)、安装Git

安装Git是为了利用GitHub中的github.io来做博客的远程创库和服务器,之后也可以使用云服务来作为自己博客的服务器;本人为屌丝一个,就直接使用GitHub作为自己的远程服务器了,想使用云服务和创建自己特有的域名的博客,
在这里我就不介绍如何搭建了。如果你很感兴趣,不妨在网上查找资料,这类的资料还是很多的。
首先下载@git, 然后点击安装,以下是我的安装步骤:git_1 , git_2 , git_3 , 其中的Git Bash就是我们主要用到的。安装好git后,还需要一个
GitHub账号,如何注册GitHub账号,这里也不赘述了;这里给个链接自己去注册吧。@GitHub

(3)、安装hexo

使用npm来安装hexo。在电脑任意位置Shift+鼠标右键,打开Git Bash npm执行命令

1
$ npm install -g hexo

npmhexo 然后就是漫长的等待,npm_hexo 如果失败,可以使用淘宝镜像来执行;命令如下:

1
$ npm install -g hexo-cli

安装完成后,在输入命令,验证是否安装正确。

1
$ hexo -v

hexo_v

2.部署本地站点

(1)、部署hexo

在你想创建博客的盘符下面或者文件下面,打开Git Bash,执行命令;

1
$ hexo init hexoweb

也可以

1
$ hexo i hexoweb //i 是init的缩写

hexo_init
命令中init 后跟的是你博客文件的名字,我这里写的是hexoweb,你也可以写你自己喜欢的名字;然后执行一下命令;

1
2
3
$ cd hexoweb //切换到项目根目录
$ hexo g //g是generetor的缩写
$ hexo s //s是server的缩写

hexo_g, hexo_s
然后在浏览器中输入 localhost:4000查看页面是否生成。
local 看到以上图片中的样子,就说明成功了,这就是hexo默认的博客主题。现在你可以在这个文件下面开始写自己的博客了。
什么???你说这个默认主题你不喜欢,想换一个自己喜欢的主题。换主题那也行的,那下面我就教你如何换hexo的主题。

(2)、选择hexo主题

首先给你几个链接,供你参考:

https://hexo.io/themes/ 这里有很多hexo主题可供选择
https://www.zhihu.com/question/24422335 知乎上hexo主题的评价与选择
https://github.com/NEOscavenger00 我的GitHub,别忘点颗星 ^^
https://neoscavenger00.github.io/ 这是我的博客主页
我这里使用的 next主题,主要是因为这个主题容易上手,而且是最多人喜欢用的一个大众主题^
^。首先,在项目根目录下执行命令

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

然后在项目先会生成一个next文件,具体路径D:\hexoweb\themes,我们的主题就在这个文件下,后面我所要修改的主题各个设置,都会在这个文件下进行修改;
下载主题完成后,找到项目根目录下的_config.yml,具体路径为D:\hexoweb,config 使用编辑器打开该文件,然后找到theme字段,
把landscape改为next。nexi 然后在终端执行以下命令:

1
2
3
$ hexo clean //清除缓存
$ hexo g //重新生成代码
$ hexo s //本地部署

然后打开浏览器访问 localhost:4000 查看效果。next_l
如果出现这个样式,就说明主题添加成功了。next主题有三种选择,上面的是默认最简洁的一种,如果觉得不好看,可以选择修改主题文件下的_config.yml文件来确定要哪个主题。

Muse - 默认 Scheme,这是 Next 最初的版本,黑白主调,大量留白
Mist - Muse 的紧凑版本,整洁有序的单栏外观
Pisces - 双栏 Scheme,小家碧玉似的清新

我这里选择的是Mist的主题。mist 然后重新执行上面的命令,打开localhost:4000,查看效果。mist_s
到这里本地私有博客就算基本完成了,下面开始将如何利用GitHub建立远程私有博客。之后我还会教大家如何修改头像,添加标签、炫酷的页面效果、版本声明等等。

二、部署GitHub

1.创建自己的GitHub项目

(1)、创建项目

这里就可以用到我们前面注册的GitHub账号了。首先创建一个新的项目:git_new

(2)、按格式输入项目名称:

git_io

(3)、点击setting,设置一个page

setting
往下翻找到GitHub Pages,进行以下修改即可
page
这个时候访问以下你的链接(输入地址:用户名.github.io),就可以看到效果了,我的主页已经覆盖掉了,就用网上的一张图片代替
my_page

(4)、本地链接远程仓库

打开Git Bash,执行以下命令,生成ssh-keygen

1
2
3
4
$ ssh-keygen -t rsa  //中间出现什么都不用管,一直Enter下去
$ cd .ssh
$ ls
$ cat id_rsa.pub // 将出现的key 复制下来,等会要用(也就是下图我涂掉的一块)

key
然后打开GitHub主页,按照以下的步骤操作即可;
setting_1 setting_2 setting_3
这样以后就可以免密码向GitHub仓库push代码了;
之后,修改hexo根目录下的配置文件D:\hexoweb\_config.yml,deploy 修改好后,再次确定格式有没有写错,该对齐的要对齐,该留空格的要留空格。
不知道项目地址的,打开自己的GitHub主页点击刚才新建的项目;hub_io

(5)、 结尾部署

执行命令

1
2
$ npm install hexo-deployer-git --save //这是安装hexo的插件
$ hexo d //部署命令,就靠它链接远程仓库

等待一会,完成后,再访问你的网站(还记得吗?就是你GitHub上的,用户名.github.io),就会发现神奇的一幕,你在本地创建的私有博客,竟然出现在远程仓库了。
web
以后你也可以自己,写博客发布了,只要将你的网站给别人,别人就可以看到你写的博客了,是不是很开心。当然以后你也可以自己买云服务,将自己的博客部署到自己的服务器上。当然这是后话,下面我教你,发布自己的第一篇博客

(6)、发布第一篇博客

执行命令

1
2
3
$ hexo new "firstArticle"
//hexo n 也可以
//你自己的博客名称,名为firstArticle.md的文件会建在目录D:\hexoweb\source\_posts下。

然后用编辑器将文章写好后,在项目根目录下执行以下命令:

1
2
$ hexo g //重新生成代码
$ hexo d //发布到远程仓库上

现在可以访问自己的网站查看一下吧!!!
done

填坑排雷

下一篇我将写以下hexo的各种配置

1
2
3
4
5
6
7
8
9
10
var brief_introduction = {
nickName : "NEOscavenger",
site : "https://github.com/NEOscavenger00"
};
while(alive){
eat();
sleep();
code();
repeat();
}

作者:@NEOscavenger00
2018.06.06

Hello World

Posted on 2018-06-05
Words count in article: 78 字

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate

More info: Generating

Deploy to remote sites

1
$ hexo deploy

More info: Deployment

NEOscavenger

NEOscavenger

Be who you are and say what you feel

2 posts
GitHub
© 2018 NEOscavenger
Powered by Hexo
|
Theme — NexT.Mist v5.1.4
访问人数 总访问量 次