iOS收藏

小白尝试GitHub+Hexo搭建博客的征程

2016-07-21  本文已影响312人  你好自己

date: 2016-07-21 09:50:30

首先,说一下笔者搭建博客的原因:

本篇博客的适用人群:

硬件:MAC
对终端命令不太了解的小白一枚.
可以翻墙.

接着补充一下相关知识.

我们通过查询得知,一般是需要你懂点终端的命令和git,当然我也是一样,在搭建自己的博客的过程中,才真正记住了一些终端命令.

最终我们首先实现,通过SourceTree实现公司代码的版本管理和github管理自己的代码.接着开启我们的搭建博客之旅吧.

step 1 安装Node.js

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 使用说明下载,命令如下:
当然前提是,你已经安装成功:

$ 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 搭建本地博客


npm install hexo-server --save

hexo server
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

step 6 博客的主题和配置

博客主题官网:上选择喜欢的主题,以Next为例,

title: 网站大标题
subtitle: 网站小标题
description: 你对于自己的描述
author: 昵称
avatar: 头像 (如:/images/avatar.jpg, images目录位于source目录下)

step 7 github的操作

新建仓库名为 github用户名.github.io
进入仓库,点击右侧 settings,在 Github Pages 标签下可看到 Your site is published at http://你的用户名.github.io. 这句话。

step 8 将博客部署到Github

npm install hexo-deployer-git --save
// 这个一般是在最后,直接往下滑
deploy:
    type: git
    repository: 你的仓库地址(https://github.com/用户名/用户名.github.io.git)
    branch: master
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 这个是默认的那个,可以删除)

hexo generate
hexo deploy

step 10 评论系统(还未尝试,先把方法记下)

结语:纯手打博客,欢迎指正交流.

上一篇 下一篇

猜你喜欢

热点阅读