前言
积土成山,风雨兴焉;积水成渊,蛟龙生焉
很早之前就有搭建自己博客的想法,加上最近找实习的时候意识到了技术博客的重要,于是有了这第一篇博客。
目前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
网友评论