使用github pages+Hexo搭建个人博客

时间:2022-09-04 17:15:14

使用Hexo时需要安装有Node.js,git,具体配置要求https://hexo.io/zh-cn/docs/

使用Hexo搭建博客,主要使用到了下面几个命令:
1. hexo init 在指定目录初始化hexo环境
2. npm install 安装hexo相关的引用包
3. hexo generate 生成静态页面(hexo g)
4. hexo deploy 部署页面到服务器(hexo d)
5. hexo server 启动hexo内置的服务器,可以在本地浏览页面效果

直接经过上面几个步骤,不需要更改任何文件,就可以用内置的服务器浏览效果,用浏览器访问localhost:4000即可看到效果,不过这里使用的是默认的主题landscape;通过我们搭建博客需要自己选择一个喜欢的主题,hexo网站提供了很多,下面是更换主题:

更换博客主题
1. 在hexo网站选择一个喜欢的主题,使用git下载到hexo包目录中,把下载的主题放在hexo包目录themes下,默认的landscape用不到可以删掉,注意:使用git下载的主题带有.git文件夹,需要把这个文件夹删除掉,不然在我们把博客部署github pages时会出现错误;
2. 修改hexo包下_config.yml文件(不是主题下的_config.yml文件)

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: clean-blog

修改theme为自己下载的主题,注意冒号和主题名之间留一个空格;
3. hexo generate 生成静态页面(hexo g)
4. hexo deploy 部署页面到服务器(hexo d)
5. hexo server 启动hexo内置的服务器,可以在本地浏览页面效果

上面我们浏览网页都是在内置的服务器中浏览,下面是把博客部署到github pages

在这之前,要求会使用github与git,会使用git clone,push,pull github上面的项目,如果会git使用则可以继续下面:
1. 在github上面创建一个仓库,名字固定为username.github.io(这里的username是你github账号的名字)
2. 修改hexo包中的_config.yml文件:

deploy:
type: git
repo: git@github.com:sdongwan/sdongwan.github.io.git #改为自己的仓库的git地址
branch: master
  1. 使用hexo deploy部署到git仓库中
    直接使用hexo deploy会出现出错,先使用这个命令:
 npm install hexo-deployer-git --save 

再使用
hexo deploy
来部署博客,其实这个hexo deploy命令在这里跟git push origin master作用差不多
4. 察看username.github.io这个仓库setting中github pages的地方,如果该地方变绿,则说明成功了

这样就把个人博客部署到github pages上面了;

为个人博客添加第三方功能:
1. 添加评论功能:一般使用disqus,以前使用的是“多说”,去disqus中注册账号,获得short name进行配置就好了,具体操作可以上网查找
2. 添加google analytics,可以分析访客信息,具体添加步骤操作上网搜索

书写博客
1. hexo new “myblog” 通过这个命令会在hexo包下source/_posts下创建一个myblog.md文件
2. hexo generate 根据myblog.md文件生成静态网页,可以在hexo包public目录下找到myblog.html
3. hexo deploy 进行博客部署,之后就可以访问了

这样我们写博客只要在md文件中书写博客,进行部署就可以从 http://username.github.io 中看到了,书写博客大部分操作就是采用mark down进行书写博客,不过在引入图片时有点不同,因为我们直接在md文件中引入图片的绝对地址,当我们把博客部署到网络上,博客就无法显示出图片了,这里需要一个把本地绝对地址转换为网络路径地址,下面讲述;

当我们想在博客中引入图片时,就要在上面书写博客的步骤中改变一下:
1. npm install hexo-asset-image –save 使用这个命令,这个命令是可以帮助图片地址转换的,github地址:https://github.com/CodeFalling/hexo-asset-image
2. hexo new “myblog” 通过这个命令会在hexo包下source/_posts下创建一个myblog.md文件,注意此时还会出现一个myblog文件夹,这个myblog文件夹就是放图片的,也就是资源文件夹,把想引入的图片放入进去;
3. 在myblog.md中引用图片:

![photo](photo.jpg)

通过这个方式引用放入到资源文件夹的图片,这里可能会让人感觉有点奇怪,因为图片和myblog.md不在一个目录下,却还这样引用图片,不过先这样引用吧
4. hexo generate 根据myblog.md文件生成静态网页,可以在hexo包public目录下找到myblog.html,并且会发现,刚刚在myblog资源包中图片此时跟myblog.html在同一个目录下面了,所以这就是上面引用的原因
5. hexo deploy 进行博客部署,之后就可以访问了

参考博客:http://www.jianshu.com/p/99665608d295