学习hexo

github+hexo制作个人博客

2017-08-05  本文已影响0人  Heartsxin

title: github+hexo制作个人博客
categories: study
tags:


通过github的代码托管和hexo搭建个人博客

前期准备

首先要把准备工作做好,前期的账号注册、软件安装、环境搭建

注册github账号

直接到github官网注册账号即可

github Page
new repository,Repository name填写的和你的用户名相同,我觉得这个应该就是你的github Page了,我生成的链接 https://heartsxin.github.io/

在此之前你要现在本地安装了git,我现在也不是很会用git,初学者而已,按照教程一步步做的。安装很简单用起来有点不会,毕竟都是英语的,对我来说很吃力。

这是本地安装的git和github桌面版

git
这位大神已经做的很不错,我就是在他的廖雪峰博客才懂了一些git的用法、

安装Hexo

Hexo是基于Nodejs的静态博客系统,通过MackDowd编辑的.md文件会生成静态的html文件,所以在安装Hexo之前需要安装Nodejs

安装Node.js

安装Node.js

到官网下载Node.js官网直接下载,按照步骤直接安装即可。

Node.js环境配置

说明:这里的环境配置主要配置的是npm安装的全局模块所在的路径,以及缓存cache的路径,之所以要配置,是因为以后在执行类似:npm install express [-g] (后面的可选参数-g,g代表global全局安装的意思)的安装语句时,会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中,占C盘空间。
例如:我希望将全模块所在路径和缓存路径放在我node.js安装的文件夹中,则在我安装的文件夹【D:\Develop\nodejs】下创建两个文件夹【node_global】及【node_cache】如下图:

文件夹新建

新建文件夹之后在CMD窗口输入如下命令:

npm config set prefix "D:\Develop\nodejs\node_global"
npm config set cache "D:\Develop\nodejs\node_cache"

输入代码后在新建的文件夹里面会生成相应的文件后文件夹,然后配置相应的环境变量,如下图所示:


环境配置01
enter image description here

配置完后,安装个module测试下,我们就安装最常用的express模块,打开cmd窗口,
输入如下命令进行模块的全局安装:

   npm install express -g     # -g是全局安装的意思
环境配置02

通过npm安装模块时都是去国外的镜像下载的,有的时候由于网络原因会导致安装模块失败,静静等待吧...

安装Hexo

搭建好以上环境之后打开Git Bssh然后输入命令

安装Hexo

可以先去Hexo官网去看看,下面的命令就是安装Hexo

npm install hexo-cli -g #安装hexo

初始化

现在新建你博客要存储的文件夹,如:“某位置/blog”,然后在该文件夹下右击鼠标,选择Git Bash Here,然后输入如下命令:

初始化
   hexo init

然后输入

 npm install
生成静态页面

输入以下代码生成静态html代码,它是“hexo generate”的简写

hexo g 

本地启动

输入以下代码本地启动服务,它是”hexo server“ 的简写

    hexo s

此时个人博客已经初步建成,在浏览器输入 https://localhost:4000即可访问你的博客了,试试看...
它可能是这个样子,如下:

enter image description here
这样已经初步完成个人博客的初步搭建

上传至github

修改博客根目录下的_config.yml,修改 Deployment部分。

# Deployment
## Docs: https://hexo.io/docs/deployment.html
# ssh://git@github.com/wenjunoy/wenjunoy.github.io
deploy: 
type: git
repo: ssh://git@github.com/wenjunoy/wenjunoy.github.io ##这个是你的仓库地址
branch: master

部署

 hexo d

成功之后,在浏览器中输入https://username.github.io/即可访问你的个人博客了,username是你的github用户名。

总结

这样就可以拥有一个你的个人博客了,博客可以在后续学习中慢慢的完善。

总结

也附上我博客的链接,欢迎大家多多访问!
https://heartsxin.github.io/
http://heartsxin.coding.me/

上一篇下一篇

猜你喜欢

热点阅读