Node.js+Hexo+GitHub搭建属于自己的个人博客

1,400 阅读2分钟

踩了各种坑/(ㄒoㄒ)/~~,看了各种资料文档,终于搭建好了hexo,node和hexo我下载的都是最新版的。


什么是Hexo?

Hexo是一个快速,简洁且高效并且基于Node.js的静态博客框架,使用Markdown解析文章,几秒内即可利用靓丽的主题生成静态网页。


环境

  • Node.js(用于生成静态页面)官网
  • Git(用于把本地hexo内容提交到github上)官网
  • github账号(作为博客的远程仓库,域名,服务器等)官网

以上环境都安装好以后,就可以正式安装Hexo啦~ 在本地创建一个文件夹,如blog,作为hexo的根目录,有一系列的配置文件,所有的操作都会在里面进行。然后在blog里右击打开GitBash,安装Hexo。

1.安装Hexo

$ npm install -g hexo-cli

2.初始化Hexo

$ hexo init

至此,全部安装工作已完成!


执行以下命令(一般用简写的),本地测试博客
1.生成静态页面

$ hexo generate

2.启动本地服务器

$ hexo service

浏览器访问,默认情况下,访问网址为:

http://localhost:4000/

部署到GitHub

1.创建新的repositiry
仓库名必须为【username.github.io】,固定写法,这是我踩的第一个坑/(ㄒoㄒ)/~~,如果不一致最后域名在浏览器访问时就会出现404页面**

2.设置GitHub Pages
进入当前仓库的setting,拉到最后面就会看到GitHub Page

3.将本地文件部署(上传)到GitHub账户中

编辑本地blog根目录下的_comfig.yml文件,打开,拉到最后面添加如下代码。repo填的是地址(题主用的是HTTPS),就两种协议,看你们心情吧喜欢哪个用哪个。message可以不写。最最最最重要的要一定注意啦!!!! yml文件下的每个冒号后面都需要空一格在填写(否则你就会像我一样出现各种莫名其妙的bug,这是我踩的第二个坑),例如type: git(冒号后面要留一个空格再加git)切记啊!!!

deploy:
  type: git
  repo: https://github.com/NIIT123456/NIIT123456.github.io.git
  branch: master
  message: 一个用于记录踩坑填坑及生活的心路历程的地方

4.提交
执行命令,安装依赖包

 $ npm install hexo-deployer-git --save

PS:出现这两个警告的话不用担心其实你已经安装成功了,fsevent是mac osx系统的,在windows或者Linux下使用了所以会有警告,忽略即可。

再执行部署网站命令(括号里面的是简写)

$ hexo deploy

然后在浏览器中输入niit123456.github.io/就可以访问啦,把我的niit123456改成你的github的账户名就行了

每次部署步骤

三步:

$ hexo clean
$ hexo generate
$ hexo deploy

好啦~目前为止,已经你已经会部署啦坚持到现在你也不容易啊~~~///(^v^)\~~~,后面会更新修改主题大法哈哈哈哈哈