一直都在博客园写博客,不过最近在逛园子的时候不小心看到了hexo
,简直有种相见恨晚的感觉呀!在github上创建自己的开源博客,维护方便,主题多多,更重要的是,终于找到只属于自己的小窝啦!也希望自己能坚持写文^_^
博客仓库地址(喜欢的朋友给个star呀,多谢~):博客仓库点这里
为了引起读者的兴趣,先介绍一下,搭建完成之后,只需这几个简单常用的命令,就能够轻松维护自己的博客了:
|
折腾了大半天,终于搭建好了自己的博客。不过在这中途,也是历经了九九八十一难呀,所以,我怀着激动心情,把我在这个过程中遇到的坑作为第一篇博客一一记录下来,希望能帮到后面的学者。
备注1:如果喜欢以官方教程为主的,点这里
hexo官方文档。备注2:网上大多教程是都是hexo2.x版本的,所以有很多坑。因此以下教程是针对hexo的版本为3.x以上的,大家放心使用。
准备工作
- 安装node
- 到Node.js官网下载相应平台的最新版本,一路安装即可。
- 安装git
- 根据系统不同安装相应的git环境。mac系统不多说,windows一般安装msysgit。下面是我本地msysgit的截图,也还是挺好用的:
安装hexo
使用以下命令安装hexo到全局
$ npm install -g hexo然后输入命令
hexo -v
输入hexo的版本号即为安装成功。github准备
- 博客是在github上托管维护的,所以当然需要一个github的账号了。然后创建一个名为
luckykun.github.io
的仓库。 - 其中’luckykun’是我的账户名,下文同理。
除此之外,相信大多数人都知道,要想使用git命令来和github进行提交部署等操作,需要进行一些配置,大概就是下面一些命令,如不明白请自行搜索。
git config --global user.email xxx@163.comgit config --global user.name xxxssh-keygen -t rsa -C xxx@163.com(邮箱地址) // 生成ssh找到.ssh文件夹打开,使用cat id_rsa.pub //打开公钥ssh串登陆github,settings - SSH keys - add ssh keys(把上面的内容全部添加进去即可)
- 博客是在github上托管维护的,所以当然需要一个github的账号了。然后创建一个名为
初始化
ok,环境都准备好了,开始激动人心的步骤了,搭建博客。
在某个地方新建一个项目文件夹(比如Blog),然后进入Blog目录,以下所有的命令行操作都是在这个文件夹下进行的。
|
生成静态页面
初始化完成之后,就已经生成一篇”hello word”的文章了,现在执行以下命令把文章编译为静态页面:
|
本地启动
把文章变为页面之后,可以执行以下命令,本地启动服务,在浏览器中输入http://localhost:4000/查看生成的页面效果。
|
如果你看到了下面这个画面,恭喜你,你成功了!
更换主题
上面的博客效果是hexo自己默认的主题landscape
,如果你满足与它,可以跳过这个步骤,直接进行下一步。但是我却还不够满足,因为我发现了一个页面交互人性化,并且完美兼容不同终端显示的主题yilia,貌似这个主题受欢迎程度很高呀,说明我的审美还是不错啊,哈哈~~
下面贴出github上star数量最多的前10个主题:
- iissnan/hexo-theme-next, 3510个star。
- litten/hexo-theme-yilia, 1703个star。
- TryGhost/Casper, 679个star。
- wuchong/jacman, 503个star。
- A-limon/pacman, 431个star。
- daleanthony/uno, 416个star。
- orderedlist/modernist, 367个star。
- AlxMedia/hueman, 336个star。
- kathyqian/crisp-ghost-theme, 303个star。
- xiangming/landscape-plus, 287个star。
clone主题代码
在目录下执行下面的命令clone主题代码:
|
修改配置文件
温馨提示:修改的时候,每个冒号后面都需要留一个英文空格,不然会出现很蛋疼的报错!
修改Blog/_config.yml
文件:
|
修改themes/yilia/_config.yml
文件:
|
查看效果
更改主题之后可以使用命令hexo server
打开本地服务,查看效果。
部署到github
上面所有的操作完成之后,你就可以将你的Blog项目部署到github上了。
部署之前先修改
Blog/_config.yml
文件。deploy:type: gitrepository: https://github.com/luckykun/luckykun.github.io.git //luckykun替换为你自己的用户名branch: master备注:在hexo3.x版本下,这里的type应该填git,不是github;另外冒号后面都有一个英文的空格,不然会报错的。
然后使用以下命令进行部署。
$ hexo deploy备注:如果执行上述命令报错,你可以试试下面这个命令再试。
$ npm install hexo-deployer-git --save另外,部署的时候会提示输入github的账号和密码。由于每次部署都会提示,很烦人,也很影响效率,所以你可以试着这样做:
在系统环境变量中设置一个环境变量
然后在你的用户目录(C:\Users\username)下新建一个叫 _netrc的文件,内容如下:
machine github.comlogin your namepassword xxxxxx然后你可以再部署试试,就不需要输入用户和密码,方便友好多了^_^
部署成功后,你在浏览器中输入luckykun.github.io,就能看到和本地一样的效果了。
结语
可能会有同学发现,我除了使用了新的主题外,还加了很多新的东西
。
- 鼠标移动头像上会有旋转效果。
- 给文章添加打赏功能。
- 添加回到顶部的功能。
- 添加总站访问量和文章阅读量
- 添加文章目录显示
- 添加相册功能
- 给网站配置独立的域名
其实修改这些非常简单,只要你有html、css、js的基础就可以。 思路:因为整个网站都是依赖yilia主题。所以应该在theme/yilia文件夹下,修改对应的dom结构,然后添加对应的效果或者事件绑定就可以实现了。
如果大家还有问题,欢迎留言,我会很乐意为大家解答的。
好了,到这里搭建github博客的步骤就结束了。快快enjoy it吧!!!