date: 2016-07-21 09:50:30
首先,说一下笔者搭建博客的原因:
- 据我了解的,大神们都有博客,这应该也是我捣鼓了2天,依然没放弃的最大的原因吧.
- 作为一名开发人员,没有自己的技术博客,也说不过去,虽然有自己的笔记,但是,写博客是把知识深加工创造的过程,印象会更加深刻.
- 最后,肯定是为了将来做准备,你懂得.
本篇博客的适用人群:
硬件:MAC
对终端命令不太了解的小白一枚.
可以翻墙.
接着补充一下相关知识.
我们通过查询得知,一般是需要你懂点终端的命令和git,当然我也是一样,在搭建自己的博客的过程中,才真正记住了一些终端命令.
- 首先你需要知道的是,怎么判断你是否已经安装了git.
- 你是否安装了GitHub,你的GitHub玩的溜不溜.
- 笔者的困惑是,我的电脑上已经配置了公司的git账号,配置了ssh密匙,那github也需要配置ssh密匙,通过简单的查询,我们知道若不做处理很容易把公司的ssh给覆盖点,那几影响代码的版本管理.所以我没有轻举妄动.
- 关于怎么解决上述问题,请看"最终解决 同一个电脑 工作git 和 github管理"这篇博客,这篇博客稍后会发布.
最终我们首先实现,通过SourceTree实现公司代码的版本管理和github管理自己的代码.接着开启我们的搭建博客之旅吧.
step 1 安装Node.js
- 下载安装node.js的方法一般有2种,通过终端命令下载和直接官网下载安装包,我告诉你最快捷最容易成功的办法是后者,去官网直接下载安装,官网地址:https://nodejs.org/en/.
- node.js安装完成的时候,会看到提示
npm也安装好了,检测其是否被安装成功
xulianpeng$ node -v
v4.1.1
xulianpeng$ npm -v
v6.1.1
step 2 下载安装homebrew
homebrew 是MAC OSX 上面用来安装 或者 卸载软件用的非常方面的一个软件，我们下面安装 hexo 全靠它。官方网站:http://brew.sh/index_zh-cn.html,安装方法参考官网即可,需要注意的是 homebrew 安装的时候一定要在 sudo 管理员权限下安装，否则 可能遇到写入失败的问题。
在这里解释一下,在sudo权限下安装 就是在正常的命令前面 添加 sudo即可
xulianpeng$/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
或者
xulianpeng$sudo /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
step 3 下载安装hexo
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。
hexo官网地址: https://hexo.io/zh-cn/docs/ ，按照 hexo 使用说明下载,命令如下:
当然前提是,你已经安装成功:
- Node.js
- Git
$ npm install -g hexo-cli
hexo 下载完成后 运行一下 看是否安装成功
xuyuexiadeMacBook-Pro:~ $ hexo -v
hexo-cli: 1.0.2
os: Darwin 15.6.0 darwin x64
http_parser: 2.7.0
node: 6.3.0
v8: 5.0.71.52
uv: 1.9.1
zlib: 1.2.8
ares: 1.10.1-DEV
icu: 57.1
modules: 48
openssl: 1.0.2h
step 4 初始化hexo
有人说要先创建一个hexo文件夹什么的,应该是要的 ,但是我没有,直接初始化在当前目录下面
$ hexo init
INFO Cloning hexo-starter to ~
fatal: destination path '/Users/用户名' already exists and is not an empty directory.
WARN git clone failed. Copying data instead
WARN Failed to install dependencies. Please run 'npm install' manually
$ npm install
最后你会在用户目录下面发现多了几个文件和文件夹
_config.yml
package.json
scaffolds
scripts
source
├── _drafts
└── _posts
themes
step 5 搭建本地博客
- 安装Hexo关于启动服务器的插件
npm install hexo-server --save
- 启动服务器, 本地查看效果, 如果不指定端口，默认为4000
hexo server
INFO Start processing
INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.
- 打开 http://localhost:4000 查看效果
- 使用 Ctrl+c 停止服务
step 6 博客的主题和配置
在博客主题官网:上选择喜欢的主题,以Next为例,
- 前往next主题的github网页下载到本地,解压,并重命名为 next.
- 将解压后的文件夹移动到上文所得的 themes文件夹下.(里面包含一个 landscape,即是之前打开的效果主题页)
- 选择用文本编辑器打开_config.yml,找到 theme这个字段,将其后面的value值修改为 next,记得留空格.当然你还可以修改其他属性:
title: 网站大标题
subtitle: 网站小标题
description: 你对于自己的描述
author: 昵称
avatar: 头像 (如:/images/avatar.jpg, images目录位于source目录下)
- 此时主题更换成功，可启动 server 验证效果
step 7 github的操作
新建仓库名为 github用户名.github.io
进入仓库，点击右侧 settings，在 Github Pages 标签下可看到 Your site is published at http://你的用户名.github.io. 这句话。
step 8 将博客部署到Github
- 安装 hexo 关于 git 的组件
npm install hexo-deployer-git --save
- 在_config.yml 中为 git 添加配置
// 这个一般是在最后,直接往下滑
deploy:
type: git
repository: 你的仓库地址(https://github.com/用户名/用户名.github.io.git)
branch: master
- 执行(每次修改都要执行这些命令才能在github pages看到效果)
hexo generate
hexo deploy
最后会要求你输入github网站的用户名和登录密码.完事后你会看到:
To https://github.com/xulianpeng/xulianpeng.github.io.git
* [new branch] HEAD -> master
Branch master set up to track remote branch master from https://github.com/xulianpeng/xulianpeng.github.io.git.
INFO Deploy done: git
这个时候你就可以搜索这个网址了,这是我的博客地址:https://xulianpeng.github.io.
step 9 开始写博客
- 新建博客
hexo new "文章名"
//可以先试着写 英文,如果你的配置属性里面没有配置中文,有可能会报错
命令结束后,会在 source/_post下自动生成一个 "文章名.md文件".(你会看到一个 hello world.md 这个是默认的那个,可以删除)
- 使用编辑器,推荐Mou,打开这个 .md文件, 写好后,生成 部署即可.
hexo generate
hexo deploy
- 删除博客的话,直接将source/_post下对应的 .md文件删除即可 ;重新编译文章,找到这个.md文件打开重新编辑,最后 再次生成部署即可,有时候会存在一定的延迟,这跟网速有关.
step 10 评论系统(还未尝试,先把方法记下)
- 登录 http://duoshuo.com/ 点击我要安装，创建站点。站点地址是 Github Pages 的地址，多说域名自己填写。
- 由于 NexT 主题已经支持了多说，我们不需要添加其他代码，只需要在 _config.yml 中添加一个名为 duoshuo_shortname 的字段，其值为多说域名中自己填写的那部分，并不是全部多说域名。
结语:纯手打博客,欢迎指正交流.
网友评论