美文网首页
Hexo加GitHub快速搭建博客步骤

Hexo加GitHub快速搭建博客步骤

作者: 庖丁不解 | 来源:发表于2017-12-10 08:58 被阅读0次

    简介

    • Hexo: 一个利用Node.js开发,支持Markdown的开源静态博客生成器。它能帮您把markdown的md文件转成漂亮的静态html文件。

    • GitHub Pages: GitHub推出的一个免费静态页面托管服务。它能让您把静态站点部署到GitHub上,并提供github.io的域名。

    软件安装(Windows)

    • Node.js: Hexo依赖Node.js, 所以先安装它。 安装地址。安装完后需确认一下,打开命令行,点击“开始”-->运行-->输入cmd-->回车。输入path回车,检查path变量是否包含nodejs路径,比如C:\Program Files\nodejs\。继续在命令行中输入node --version回车,检查安装的Nodejs版本。到此Nodejs安装完毕。

    • Git: 这个对IT人员来说应该很熟悉,之前没有接触过的道友,也没关系,先安装,后面详细讲使用,下载地址

    • Hexo: 首先自己新建一个Hexo安装目录,比如在E盘新建一个Hexo目录,进入该目录E:\Hexo,右键选择Git Bash Here

    接下来我们访问Hexo官网, 在首页下方,我们可以找到安装步骤如下。

    $ npm install hexo-cli -g
    $ hexo init blog
    $ cd blog
    $ npm install
    $ hexo server
    

    然后在刚才右键打开的Git Bash中,一条一条输入上面指令即可。如果速度慢,可以挂个代理。好了,现在就能在本地看到自己的博客页面了,打开浏览器输入:http://localhost:4000/ 回车。

    Hexo更换主题和设置

    Hexo默认使用的是landscape主题,可以到Hexo官网的主题,选择喜欢的进行更换。这里以NexT为例,先Ctrl+C停止Hexo服务,然后在Git Bash中输入如下命令(注意当前bash目录为E:\Hexo\blog):

    $ git clone https://github.com/iissnan/hexo-theme-next themes/next
    

    完成以后要修改两个配置文件:

    • 站点配置(E:\Hexo\blog_config.yml):
    theme: next # 修改为NexT主题
    
    • 主题配置(E:\Hexo\blog\themes\next_config.yml)
      可以参考下面博客常用功能设置的内容,或者访问NexT官网,根据实际需要进行配置。

    站点部署

    登录GitHub创建仓库

    如果还没有GitHub的同学可以先申请,然后登录。比如你的git账号为tobiasahlin,新建名为tobiasahlin.github.io的仓库。踩坑提醒:仓库名必须严格按照上面格式,否则以后用浏览器访问tobiasahlin.github.io时,将是404错误。

    把本地静态文件部署到GitHub

    1. 安装hexo-deployer-git插件,在Bash中输入:
    $ npm install hexo-deployer-git --save
    
    1. 为GitHub添加SSH Key(SSH推送文件免密码登录)
    $ ssh-keygen -t rsa -C "youremail@example.com"
    

    然后一直回车即可,最后打开C:\Users\Administrator.ssh\id_rsa.pub文件,复制所有文件内容。登录GitHub,在settings-->SSH and GPG keys-->New SSH key,在title中给你的key取个名,在Key中,把刚才复制的文件内容拷贝过来,保存。

    1. 修改站点配置(E:\Hexo\blog_config.yml)
      找到“deploy”字段,修改为
    deploy:
      type: git
      repo: git@github.com:tobiasahlin/tobiasahlin.github.io.git
      branch: master
    
    1. 提交本地文件
    hexo g # 提交文件前先生成一下静态文件
    hexo d # 提交文件到GitHub仓库
    
    1. 浏览器中输入tobiasahlin.github.io,就能看到博客啦(可能要等10分钟,GitHub需要时间处理)

    Hexo常用命令

    hexo g # 等于hexo generate 每次有内容更新后,都要生成一下静态文件
    hexo s # 等于hexo server 启动本地服务
    hexo d # 等于hexo deploy提交文件到GitHub仓库
    hexo clean # 删除db.json和public文件夹,之后hexo g可重新生成
    hexo init [folder] # 新建一个网站。如果没有设置文件夹,默认在目前的文件夹建立网站。
    hexo new [layout] <title> # 新建一篇文章。没有layout,将用默认设置
    

    博客常用功能设置

    打开主题配置(E:\Hexo\blog\themes\next_config.yml)

    评论功能

    找到

    disqus:
      enable: false
      shortname:
      count: true
    
    changyan: 
      enable: false
      appid:
      appkey:
    

    同学可以自行选择disqus还是畅言,到他们官网注册以后可以把相关信息填入即可。

    网站访问统计

    找到"不蒜子统计",把enable改为true

    busuanzi_count:
      # count values only if the other configs are false
      enable: true
      # custom uv span for the whole site
      site_uv: true
      site_uv_header: 本站访客数
      site_uv_footer: 人次
      # custom pv span for the whole site
      site_pv: true
      site_pv_header: 本站总访问量
      site_pv_footer: 次
      # custom pv span for one page only
      page_pv: true
      page_pv_header: 本文总阅读量
      page_pv_footer: 次
    

    添加打赏功能

    找到

    # Reward
    reward_comment: 多谢打赏
    wechatpay: /images/wechatpay.jpg
    alipay: /images/alipay.jpg
    #bitcoin: /images/bitcoin.png
    

    把开头注释号#去掉,填写微信和支付宝的二维码图片地址即可。

    订阅微信公众号

    找到

    wechat_subscriber:
      enabled: true
      qcode: /uploads/wechat-qcode.jpg
      description: 欢迎您扫一扫上面的微信公众号,订阅我的博客!
    

    把开头注释号#去掉,填写微信二维码图片地址即可。

    参考

    1. https://linghucong.js.org/2016/04/15/2016-04-15-hexo-github-pages-blog/
    2. https://www.cnblogs.com/ayseeing/p/3572582.html
    3. https://hexo.io/zh-cn/docs/commands.html
    4. http://theme-next.iissnan.com/theme-settings.html
    5. https://xuanwo.org/2015/03/26/hexo-intor/
    6. http://www.jianshu.com/p/834d7cc0668d

    相关文章

      网友评论

          本文标题:Hexo加GitHub快速搭建博客步骤

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