程序员

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

2018-11-25  本文已影响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
上一篇下一篇

猜你喜欢

热点阅读