hexo+gitpage

在学习编程的过程中,难免会遇到很多很多不会解决的bug,网上查询资料时往往会看到很多大神在自己的博客中对自己的问题进行了详细的讲解,心里常常想,什么时候才能搭建一个属于自己的博客。现在,仅仅使用hexo和gitpage我们就可以搭建一个简易的静态博客,是不是很神奇,那我们现在就开始吧

注:此处默认大家已经安装配置好了合适的node环境和git环境

一、hexo安装与使用

1.hexo安装
搜索 npm你会发现有许多和hexo有关的包,这里我们选用npm-cli这个包,在命令行中打印
npm install npm-cli -g
2.hexo使用
首先初始化hexo
hexo init projectName
安装好了当然就要开始使用了,不过在此之前,我们要先大概了解一下每个文件、每个目录是干什么的


 a. **scaffolds**文件夹储存的是默认文件,在你用hexo创建了一个md文件后,打开文件你会发现每个文件的头部都会有相同的内容,这部分的内容就是在scaffolds文件夹中定义的
 b. **source**文件夹中有一个_POST文件夹,里面储存的就是博客相关资源。
 c. **themes**文件夹中存储的是博客的主题,gitpage上有许多主题,大家可以自行选择
 d. **public**文件夹是编译后才出现的,这部分是真正要展示的部分,hexo将md文件经过打包、整合成index.html文件
 e. **.deploy_git**是部署服务器是产生的文件夹,里面存贮将本地文件部署到服务器是所需要的文件
 f. **node_modules**文件夹是node的依赖包,具体的就不再介绍
 g. *。gitignore*文件记录自动生成文件的第一层列表
 h. *_config.yml*文件存储的是hexo的配置信息
 i. *db.json*文件存储数据库信息
 k. *package.json*文件在node中已介绍
注:source文件夹中只能存储md文件,媒体格式的图片页面中无法显示,媒体的显示方法见下文

下面开始写自己的博客,进入project文件夹内
hexo new "filename"
创建一个md文件,在文件里编写博客,其中markdown基本语法请见我之前的博客
hexo generatehexo g 编译代码
hexo serverhexo s 开启服务
hexo默认的端口是4000,开启服务后在浏览器中输入localhost:4000,就可以访问到博客啦,不过现在只是在本地服务器端访问到了自己的博客,其他人是看不到的

二、gitpage配置

gitpage是github的一个延伸服务,因此使用前你需要有一个github账号,之后创建一个repository,命名为”username.github.io”,这个名字是固定的,并且每个账号只能有一个gitpage远程库。然后点击setting,在github pages模块你会发现github给你分配了一个域名,并且这个域名就是你的repository名;你还可以找到”choose a theme”按钮,你可以从这里找到你需要的主题,下面开始部署

三、部署

上述操作都完成后,只需要将_config.yml文件中的最后一段话改成:

deploy:
  type: git
  repository: git@github.com:username/username.github.io.git
  branch: master

最后命令行中依次执行
hexo clean 清除上一次编译产生的文件
hexo g 重新编译
hexo d 部署到github
在浏览器中访问https://username.github.io就可以看到自己的博客啦

注:在部署的时候,经常会出现错误,下面我把我遇到的坑总结一下
1.命令行中输入hexo d没有任何反应,原因是你没有安装所需要的依赖

npm install hexo-generator-index --save
npm install hexo-generator-archive --save
npm install hexo-generator-category --save
npm install hexo-generator-tag --save
npm install hexo-server --save
npm install hexo-deployer-git --save
npm install hexo-deployer-heroku --save
npm install hexo-deployer-rsync --save
npm install hexo-deployer-openshift --save
npm install hexo-renderer-marked@0.2 --save
npm install hexo-renderer-stylus@0.2 --save
npm install hexo-generator-feed@1 --save
npm install hexo-generator-sitemap@1 --save
大家对照node_modules文件夹逐一查找安装即可,尤其是npm install hexo-deployer-git --save

2.无法找到命令

查看_config.yml将type后改为git,hexo 2.0x时用的是github,现在是hexo都是3.0及更新版本

注:type等跟着的冒号后面需要有一个半角英文空格,否则会报错
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值