Hexo+next+GitHub Pages搭建个人博客(一)

看这篇博客之前,如果你没有看过Hexo的官方文档,建议先访问官网,把文档看一遍。

一、环境安装

安装Node.js,

安装Hexo,

安装Git,(使用Git将本地项目上传到码云)GitHub的使用和码云差不多。

二、准备工作

创建两个GitHub仓库,一个存储静态网页,另一个存储源码。(感觉码云也可以)

如果你嫌麻烦,也不想知道原理的话,其中一个仓库的名字命名未userName.github.io(userName为你的用户名)。如果不是这样命名,然后网页出现404,或者你想要知道为什么这样命名的话,GitHub文档上有,你可以自己研究一下。

GitHub页面基础知识,第二点,配置GitHub页面的发布源里面有怎么设置。(在仓库的Settings里面有一个GitHub Pages栏目

三、创建博客

1、下载hexo工程

创建一个文件夹,右键打开Git Bash Here(git的命令行运行程序和计算机cmd的运行程序一个道理。)

执行 hexo init FlieName命令(FlieName就是你想要的文件名称)

执行了这个命令后,hexo会创建一个FlieName文件夹,并且下载自带的hexo环境,warn的不用管。

Hexo+next+GitHub Pages搭建个人博客(一)_第1张图片

下载完成之后,你的文件夹应该是这样的:

Hexo+next+GitHub Pages搭建个人博客(一)_第2张图片

(如果你不小心把node_modules文件夹删掉了,你可以执行 npm install hexo --save命令下载。)

然后cmd打开这个文件夹,或者在这个文件夹里面右键,打开Git Bash Here。执行hexo s(开启服务器),不出意外的话会出现:

在浏览器上打开http://localhost:4000/就可以预览你的博客了。如果出现无法访问此网站,可能是端口被占用,或者服务器关闭了(Ctrl+C是关闭服务器),如果是端口被占用的话

执行 hexo server -p 4001命令修改端口,

或者找到 node_modules/hexo-server/index.js

修改port: 4001的端口配置。

2、配置主题

hexo 自带了一个主题landscape,如果不喜欢这个,可以在主题里面查找喜欢的主题下载。

git clone 主题路径(https://github.com/iissnan/hexo-theme-next themes/next这里下载next路径)

Hexo+next+GitHub Pages搭建个人博客(一)_第3张图片

下好主题之后,打开hexo 的配置文件_config.yml(就在根目录),找到theme这个关键字,修改landscape为你下载的主题(这里是next)

Hexo+next+GitHub Pages搭建个人博客(一)_第4张图片

3、修改hexo的配置文件

打开hexo 的配置文件_config.yml(根目录),

配置网站基本信息:

Hexo+next+GitHub Pages搭建个人博客(一)_第5张图片

language 是配置语言文字读取文件为zh-Hans,在主题next下有language文件夹,里面有这个配置表。

配置提交路径:

这个git仓库就是用你用户名+github+io创建那个。(在你执行hexo clean && hexo g && hexo d命令的时候就会将你的网站上传到这个地址)

4、部署

部署之前执行 hexo s ,然后 到http://localhost:4000预览你的网站。

执行hexo clean && hexo g && hexo d命令

Hexo+next+GitHub Pages搭建个人博客(一)_第6张图片

这就是部署好了,hexo先将你配置好的东西生成静态文件存放到Public文件夹下,然后将这些东西托管到Github,_config.yml配置中repository那个地址中。然后你访问你的网址(用户名.github.io)就可以在网上看到你的博客了。(如果你的仓库不是这样创建的,访问配置GitHub页面的发布源查看怎么设置仓库,和网站地址)

到这里博客的基本的功能就走了一个流程了。接下来就是修改,美化,和写博客了。

Hexo+next+GitHub Pages搭建个人博客(二)

 

你可能感兴趣的:(计算机相关基础,个人博客,hexo,next)