美文网首页程序员
【博客搭建】Hexo+GitHub代理(mac系统)

【博客搭建】Hexo+GitHub代理(mac系统)

作者: 上弦同学 | 来源:发表于2018-11-25 21:05 被阅读0次

    前言

    积土成山,风雨兴焉;积水成渊,蛟龙生焉

    很早之前就有搭建自己博客的想法,加上最近找实习的时候意识到了技术博客的重要,于是有了这第一篇博客。

    目前github博客主流是Jekyll和Hexo两种搭建方式。
    Hexo更加简洁美观,能通过命令实现本地预览,并直接发布到web容器实现同步。

    1. 博客本地环境搭建

    安装node.js和git

    我之前就安装过node了,现在更新版本

    查看本机node.js版本
    node -v
    
    清除node.js的cache
    sudo npm cache clean -f
    
    安装管理node.js版本的n
    sudo npm install -g n
    
    安装最新版本的node.js
    sudo n stable
    
    验证
    node -v  v11.0.0
    npm -v 6.4.1
    
    检查git版本
    Git --version 
    git version 2.14.1
    
    安装Hexo
    sudo npm install -g hexo
    -g表示全局安装
    
    博客初始化

    创建存储博客的文件my_blog,并进入。
    cd /Users/summerchaser/Desktop/my_blog

    hexo init
    安装npm
    sudo npm install
    

    生成本地文件,开启服务器,通过http://localhost:4000查看本地博客

    hexo g
    hexo s
    

    2. 本地博客关联github

    新建SummerChaser.github.io仓库

    打开my_blog下 _config.yml,把最后deploy配置如下

    deploy:
      type: git
      repository: https://github.com/SummerChaser/SummerChaser.github.io.git
      branch: master
    (注意type、repository、branch后均有空格)
    

    在myblog下生成静态文件并上传到服务器

    hexo g
    hexo d
    

    执行

    hexo d
    

    ERROR Deployer not found: git
    解决 :

    npm install hexo-deployer-git --save
    
    可通过 https://SummerChaser.github.io 访问博客

    添加ssh keys到GitHub后不需要每次更新博客再输入用户名和密码

    cd ~/.ssh
    

    有文件夹就有密钥

    更改本地博客
    hexo g和hexo d更新到GitHub

    更换主题,选择 hexo-theme-next
    cd到my_blog下

    cd /Users/summerchaser/Desktop/my_blog 
    git clone https://github.com/iissnan/hexo-theme-next themes/next
    

    更改blog目录下_config.yml
    theme :landscape改为next

    每次更新博客,部署文章

    hexo g  //生成缓存和静态文件
    hexo d  //重新部署到服务器
    

    网页端无变化

    hexo clean  //清楚缓存文件(db.json)和已生成的静态文件(public)
    

    配置next主题
    官网 : http://theme-next.iissnan.com/getting-started.html

    主题设定,选择Scheme
      ● Muse - 默认 Scheme,这是 NexT 最初的版本,黑白主调,大量留白
      ● Mist - Muse 的紧凑版本,整洁有序的单栏外观
      ● Pisces - 双栏 Scheme,小家碧玉似的清新
    

    修改my_blog/themes/next/_config.yml

    scheme: Muse
    #scheme: Mist
    #scheme: Pisces
    #scheme: Gemini
    选择Pisces去掉#
    
    设置语言

    修改my_blog/_config.yml

    language: zh-Hans
    
    菜单配置

    修改my_blog/themes/next/_config.yml

    menu:
      home: / || home
      #about: /about/ || user
      #tags: /tags/ || tags
      #categories: /categories/ || th
      archives: /archives/ || archive
      #schedule: /schedule/ || calendar
      #sitemap: /sitemap.xml || sitemap
      #commonweal: /404/ || heartbeat
    去掉#
    
    设置侧栏

    修改my_blog/themes/next/_config.yml

    sidebar:
      # Sidebar Position, available value: left | right (only for Pisces | Gemini).
      position: left
    
    设置侧栏展示时机
    display: always
    
    设置头像

    修改my_blog/themes/next/_config.yml

    修改字段 avatar, 值设置成头像的链接地址
    可放置在 source/images/ 目录下 
    配置为:avatar: /images/my_icon.jpg
    
    设置作者名称

    编辑 站点配置文件,设置 author为昵称。

    站点描述

    编辑 站点配置文件,设置 description 字段为站点描述

    Hexo的一些基本命令

    hexo g #完整命令为hexo generate,用于生成静态文件
    hexo s #完整命令为hexo server,用于启动服务器,主要用来本地预览
    hexo d #完整命令为hexo deploy,用于将本地文件发布到github等git仓库上
    hexo n "my article" #完整命令为hexo new,用于新建一篇名为“my article”的文章
    

    发布第一篇文章

    hexo n "Mac+Hexo+GitHub博客搭建"
    

    显示
    Created: ~/Desktop/my_blog/source/_posts/Mac-Hexo-GitHub博客搭建.md
    编辑md文件,重新部署

    hexo g
    hexo d
    
    博客初步搭建成功!

    效果如下 :


    image.png

    相关文章

      网友评论

        本文标题:【博客搭建】Hexo+GitHub代理(mac系统)

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