2015年大三至今,我的博客从免费虚拟空间+独立域名,到阿里云主机,腾讯云主机。到现在,我突然觉得折腾够了,我想一个安稳的地方,让我只关注内容的写作本身。当然,我的个人网站还在运行,贾宛龙,博客功能迁移还在,但不在维护更新,我的 简书上偶尔还会发表技术文章,但也会陆陆续续转移到这里。
在这里抛弃其他的,只谈技术,其实很简单,我的技术栈是github page+hexo,没有编程经验的同学看看文章摸索两遍也可以实现。
1、安装软件环境
首先需要安装新版本的node,它本身包含着npm,而且会自动帮你安装至环境变量,非常傻瓜化,此外还需要安装git,为了将代码同步到github上面。这两个软件在官网搜索安装适合本机的就行。
2、安装淘宝镜像
由于墙的原因,我们不得不借助淘宝镜像这样的高效率东西来提升效率,在这我选的是全局安装
npm install -g cnpm --registry=https://registry.npm.taobao.org
3、安装hexo脚手架
因为我的博客是基于hexo而搭建的。那么全局安装hexo也是必须的
npm install hexo-cli -g
4、初始化hexo项目
在这里,你需要新建一个文件夹作为你的项目存放地,在文件夹里,右键git执行hexo init初始化一个hexo最基本的项目
hexo init
5、安装hexo的依赖
在这一步骤主要是将安装博客依赖的环境,比如vue,jquery等包文件,我们这里只需执行命令,让它自己安装即可
npm install
6、打包项目
此时项目已经完成初始化操作,但还没有我们常见的html文件等,此时需要将hexo项目打包成浏览器可以运行的静态文件
hexo g
当执行完命令,你会发现在文件夹多了public文件夹,点开则看到了我们熟悉的index.html等文件
7、本地运行
当安装完hexo,以及其依赖,我们则可以在本地运行hexo为我们提供的脚手架页面,此时执行hexo s 则控制台显示成功,打开浏览器,输入http://localhost:4000,则可查看hello owrld
hexo s
8、注册github账号
因为我的网站是寄托github,所以需要注册github账号,github为每一个用户提供了一个单独的可直接访问的项目,注意此项目的的项目名必须是用户名,记得开启page功能,如果成功后,访问 用户名.github.io 则能直接运行这个项目,但只限于静态文件。我的地址是jiawanlong.github.io 访问地址是 博客
9、配置hexo指向github
在这里主要是将博客自动同步到自己刚创建的github账号下的pages下,需要修改根目录下的config.yml,注意每一个单词前的空格
deploy:
type: git
repository: git@github.com:jiawanlong/jiawanlong.github.io.git
branch: master
10、生成key文件
ssh-keygen -t rsa -C "自己的github关联的邮箱"
如果执行失败,则执行
ssh-agent -s
eval `ssh-agent -s`
ssh-add
在这里三按回车键,执行完会发现,本地的c盘下,用户名文件夹下多了个.ssh文件夹
11、复制key文件到github
用记事本打开并复制.ssh文件夹下id_rsa.pub的内容,到github账号下的settting下的ssh选项,在这里title可以随意填写,将key粘贴下面
12、测试是否关联成功
git bash 里输入以下代码 不要改任何一个字
success ssh -T git@github.com
当询问yes or no时选yes,如果出现success,则表示成功
13、完善个人github信息
如果github都不知道我们是谁,怎么会让我们提交代码呢?
git config --global user.name "github名字"
git config --global user.email "github邮箱"
14、安装 hexo-deployer
除了上述外,还需要安装 hexo-deployer 来进行傻瓜化自动部署,将本地的hexo项目通过命令自动部署github上
npm install hexo-deployer-git --save
15、部署
hexo d
此时,打开你的用户名.github.io,则可以看到本地的hexo已经部署到github page上面,博客就此完成
16、完善
当打开项目时候,发现很卡,通过f12发现啊,妈的,jquery是google的,所以握全局查找,将juqery的路径替换了一下,重新clean后,再次部署,美滋滋
<script src="http://code.jquery.com/jquery-latest.js"></script>
16、安装主题
确认过眼神,maupassant就是我想要的主题,某大神已经将主题的脚手架搭建好,包括评论功能,百度统计,以及页面访问量等功能
git clone https://github.com/tufu9441/maupassant-hexo.git themes/maupassant
npm install hexo-renderer-pug --save
npm install hexo-renderer-sass --save
17、配置主题
修改根目录下的config.yml ,找到theme选项,改成maupassant,则重新打包生成,发现已经焕然一新
将语言设置成中文
在主题的配置项可以配置livere评论账号,则博客加了评论功能,添加百度统计账号,则会自动关联上,可以查看博客的实时访问人,及其ip,城市等
网友评论