【程序】我是如何建立我的第一个博客网站的？

写在前面

我从大二开始喜欢上写程序，也从那开始自学了很多编程语言。当我第一次接触到前端开发的时候，那些由多个不同后缀名组成的项目，让我觉得又新奇（第一次见这种编程语言，太有特色了），同时又恐惧（这么多个编程语言组成，我能学会吗）。

大二是我人生阶段最迷茫的一段时间，不想上课，不想和人交往。但是我生来好像就有股向上的劲头，即使每天很颓废，也告诫自己做点有用的事情，做点有用的事情。所以我那段时间学了很多编程语言，虽然是迷迷糊糊学了很多语言，走了很多弯路。

好在我也勉勉强强地学了前端开发，我记得那段时间我先是在网上看了一个教学视频，然后就开始自己动手捣鼓做起了第一个个人网站，花了一天一夜的时间。

大三开始我稳定地在实验室跟着一个老师做科研，便没有时间再去学写程序。

大四基本上是在做创新创业比赛，更没有时间写程序了。

但是大二以后的整个过程，我总是偶尔地问自己：当初我为何要学写这么多程序？我大二整整一年的时间都花在自学程序上，感觉就这么放弃有点太不值得？自学程序有用吗以后？

现在我也不知道学的程序有没有用，但是就是因为当初花了一年时间起步，不甘心没有一点收获地戛然而止。所以我，到了大四暑假的末尾，研一马上要开学，要重新拾起我以前学的东西，好好做下去，希望能做出点东西。

自学编程的时候听到最多、最有用的建议就是要多做实战，而对于前端开发来讲，第一个要做的实战就是建立自己的个人网站，第二个就是建立个人博客。所以在建立好自己的第一个网站，一年后，也就是现在，我开始建个人博客，并且立下不倒的flag，这个网站将会见证我一点一滴的成长（未来我的生活琐事，学习曲线等奖全部记录记录在这里），是我人生中一笔宝贵的财富，我一定会好好经营。

正文

一、找资料

一般开始一个新东西，第一步肯定是找资料，毕竟光想是想不出来的。我找的第一个资料就是B站Up主CodeSheep的一个视频
手把手教你从0开始搭建自己的个人博客 |无坑版视频教程| hexo：https://www.bilibili.com/video/BV1Yb411a7ty

在看这个视频的过程中，我有很多疑惑（为什么要下载node.js,在cmd下建文件夹是怎么回事等等），所以也会找其他资料
使用hexo+github搭建免费个人博客详细教程：https://www.cnblogs.com/liuxianan/p/build-blog-website-by-hexo-github.html
hexo5分钟免费搭建个人博客教程：https://www.jianshu.com/p/722fe57ef163

结合视频，以及文本资料，我的很多疑惑都消除了，接下来我便可以自己动手尝试了。

二、下载软件，准备环境

1.安装好node.js（最好下载Windows 安装包 (.msi)，在安装过程中会配置好路径，用zip文件还要自己手动配置，特别容易报错） 和 Git

2.在das窗口下输入命令 node -v和 npm -v，检验hexo运行环境

3.git安装完成后的检验操作是：鼠标右键。会出现git GUI here 和git bash here

三、使用hexo框架搭建静态博客

1.安装 hexo 框架

1

npm install -g hexo

2.在电脑的某个地方新建一个名为hexo的文件夹（名字可以随便取），比如我的是E:\程序\html_codes\janiceBlog，由于这个文件夹将来就作为你存放代码的地方，所以最好不要随便放。

3.cmd窗口下切换到janiceBlog文件夹路径，然后输入一下代码：

1

hexo init # 初始化

hexo会自动下载一些文件到这个目录，包括node_modules

1
2

hexo g # 生成
hexo s # 启动服务

执行以上命令之后，hexo就会在public文件夹生成相关html文件，这些文件将来都是要提交到github去的。hexo s是开启本地预览服务，打开浏览器访问http://localhost:4000即可看到内容

4.修改主题
可以再官网选一个好看的主题
以yilia主题为例，在博客路径下，输入一下命令:

1

git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

修改_config.yml中的theme: landscape改为theme: yilia，然后重新执行hexo g来重新生成。

如果出现一些莫名其妙的问题，可以先执行hexo clean来清理一下public的内容，然后再来重新生成和发布

四、上传到github

1.配置_config.yml中有关deploy的部分：

1
2
3
4

deploy:
  type: git   
  repository: [email protected]:janice143/iainsBlog.git
  branch: master

2.打开博客文件夹，右键选择git bash here，输入hexo d就会将本次有改动的代码全部提交，没有改动的不会(部署这个命令一定要用git bash,不要在cmd下，不然会报错)

五、上传到GitHub出现一些错误

错误1： hexo + github pages搭建博客，本地server成功，部署到github上之后样式加载不出来
解决：
需要修改根目录_config.yml文件中的url地址和根目录

1
2
3
4
5
6

##If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'

url: https://janice143.github.io/myblog.github.io/
root: /myblog.github.io
permalink: :year/:month/:day/:title.html
permalink_defaults:

url 是GitHub pages给我们分配的网址
root是搭建该博客的仓库名

最后重新部署上传就可以了

1
2
3

hexo clean
hexo g
hexo d

错误2：修改默认头像
解决：
在主题的yilia文件夹的img文件夹里放上头像图片，然后修改yilia文件夹下的_config.yml文件

1
2

#你的头像url
avatar: /myblog.github.io/img/me.JPG

六、写博客

1.定位到我们的博客目录，执行命令：

1

hexo new “博客名自己取”

2.markdown格式编写规则参考：http://www.mdeditor.com/

License

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。

Share