美文网首页工具癖
GItHubPages与Hexo构建个人博客

GItHubPages与Hexo构建个人博客

作者: 心智的年轮 | 来源:发表于2018-03-01 07:05 被阅读0次

    GitHubPages是GitHub提供的免费的静态资源服务器,搭建简单,不用自己购买云服务,可以绑定自己购买的域名,用来做个人博客再适合不过

    步骤:

    1、在github中创建一个项目,名称一定是 username.github.io这样的格式

    2、新建好项目后clone到本地,然后添加一个测试的html文件

    <html>
      <body>
        test
      </body>
    </html>
    

    访问自己的域名 https://qlql489.github.io/

    看到显示test

    Hexo

    hexo是一款基于Node.js的静态博客框架,需要安装nodejs环境

    详情可以参考https://www.jianshu.com/p/35e197cb1273 写的很全

    主要步骤

    安装Hexo

    npm install hexo-cli -g //安装
    hexo init //初始化博库
    hexo server // 本地加载 在浏览器中输入localhost:4000即可看到效果
    

    添加 SSH Key 到 GitHub

    hexo需要ssh的方式与github关联

    $ ssh-keygen -t rsa -C "邮件地址@youremail.com"
    

    打开本地 id_rsa.pub 文件( 参考地址 C:\Documents and Settings\Administrator.ssh\id_rsa.pub,)。此文件里面内容为刚才生成的密钥。如果看不到这个文件,你需要设置显示隐藏文件。准确的复制这个文件的内容,才能保证设置的成功。

    登陆 GitHub 系统。点击右上角的 Account Settings--->SSH and GPG keys-->new SSH key

    将id_rsa.pub的内容复制到文本框内,保存

    命令行输入

    ssh -T git@GitHub.com
    

    提示

    The authenticity of host 'github.com (192.30.255.113)' can't be established.
    RSA key fingerprint is SHA256:nThbg6kXUpJWGl7E1IGOCspRomTxdCARLviKw6E5SY8.
    Are you sure you want to continue connecting (yes/no)?
    

    输入yes

    在hexo的配置文件_config.yml中配置你的git的ssh地址

    deploy:
    type: git
    repo: git@github.com:qlql489/qlql489.github.io.git
    branch: master
    

    部署

    执行

    
    hexo clean // 删除旧的 public 文件
    hexo g //构建
    部署到git需要安装node组件
    npm install hexo-deployer-git --save
    再执行
    hexo d
    

    即可在你的GitHubPages中看到你的博客

    新建文章

    hexo new "文章标题"
    

    会在./source/_posts下生成一个markdown文件
    文件头部有一些配置

    ---
    title: 测试
    date: 2018-02-19 12:56:54
    categories: 随笔 #文章的分类,这个可以自己定义
    tags: [Mac,效率,快捷方式] #tag,为文章添加标签,方便搜索
    ---
    

    下面就是markdown格式的文章了

    更换主题

    默认的主题还是比较丑的
    官方主题网页上可以选择其他的样式
    必要的一些功能是需要集成在主题中的,比如:

    • 评论
    • 统计
    • 爬虫优化
    • 打赏二维码

    有编程基础的可以自己添加想要的功能

    以我使用的主题为例:snippet
    下载下来后重命名文件夹,然后放在themes下


    修改_config.yml文件中的
    theme: snippet
    

    重新构建执行

    hexo clean && hexo g && hexo s
    

    即可看到效果


    如果你懂一些html、css和一些前端打包的知识,就可以动手自己改一下主题了

    修改后的效果

    绑定域名

    域名可以在阿里云、新网等地方购买,或者在国外的godaddy购买,就是续费贵了一些,但是有更多的后缀可以选择,比如.me .co等

    购买好域名后在博客的resouce目录下新建文件CNAME 里面填写你要想映射的域名


    在命令行ping 自己博客的地址得到ip


    he7.png

    我使用的是阿里云的域名,在后台设置域名解

    访问设置的域名

    后续还可以进一步添加一些东西,如阅读统计、评论、百度统计等

    gitbook 的使用参考我另一篇文章
    gitbook使用学习

    参考:

    增加阅读统计
    hexo增加SEO
    Hexo安装和配置
    使用Hexo搭建博客(四),博客的部件和插件
    【干货】2个小时教你hexo博客添加评论、打赏、RSS等功能

    相关文章

      网友评论

        本文标题:GItHubPages与Hexo构建个人博客

        本文链接:https://www.haomeiwen.com/subject/zwkqxftx.html