Welcome to Julian's Blog

"Hello World, Hello Friend"

Posted by Julian Xu on 2016-08-05

“Yes! It’s on. ”

前言

忙活了两天,【精靈社記】的Blog就这么开通了。

跳过废话,直接看如何搭建

过去几年,曾先后用过Emlog、WordPress搭建过博客。搭建的过程并不难,主要在于域名和空间上。曾经试用过免费空间、免费域名,但始终不好用,访问速度慢且麻烦。也曾想过购买域名和空间,但只是搭建来玩玩的,平时也没写几篇文章,故放弃了此想法。

2015年大学毕业,开始在微信公众号平台开通了【精靈社記】微信号,渐渐第开始了写文章;尽管写的不怎么好,但对于写作的平台却挑剔起来。对于微信公众号的文章编辑深感不爽,后来又使用了简书写了几篇文。直到了解了Markdown,喜欢其带来的优雅写作体验。

前两天,知悉了可以利用“hexo”+“github”搭建静态博客,且支持Markdown写作,于是乎,又折腾了两天来了解并动起手来。最终成功开通了此博客平台。

正文

接下来说说搭建这个博客的过程。

对于我这种非技术人员,首先,要先介绍几个概念性的东西:

  • Hexo: hexo是一款基于Node.js的静态博客框架,搭建过程比较快捷。 详情可直接看hexo官网

  • Github Pages: Github据说是全球最大同性交友社区,毕竟程序员大多数都是男性。GitHub Pages本用于介绍托管在GitHub的项目, 不过,由于他的空间免费稳定,用来做搭建一个博客再好不过了。简单说,可以被认为是用户编写的、托管在github上的静态网页。

而利用“hexo”+“github”的优点非常明显:

  • Markdown 带来的优雅写作体验
  • 利用 GitHub Pages 的域名和免费无限空间,不用自己折腾主机
    • 如果需要自定义域名,也只需要简单改改 DNS 加个 CNAME 就好了

对于我这种技术小白,搭建过程或许觉得有那么点小繁琐,但一旦搭建完成,写文章是极简单,极舒服的。

只需要几个简单命令,就可以完成一切。

nexo n #写文章
hexo g #生成
hexo d #部署 # 可与hexo g合并为 hexo d -g

环境准备

安装Node

用来生成静态页面的,直接到Node.js官网下载相应平台的最新版本,直接安装即可。

安装Git

把本地的hexo内容提交到github上去.Mac 安装有Xcode就自带有Git;或者也可以直接去官网下载安装。

配置GitHub

用来做博客的远程创库、域名、服务器之类的,直接在官网注册Github账号即可。然后,建立与你用户名对应的仓库,仓库名必须为『your_user_name.github.io』。

仓库建立好后,根据自己需要看是否配置SSH公钥,可以不配制,不配置的话以后每次对自己的博客有改动提交的时候就要手动输入账号密码,配置了就不需要了。至于SSH公钥的配置教程网上很多,不多说了。当时不懂,配置的过程略显辛酸。

正式安装hexo

Node和Git安装好后,即可正式安装hexo。打开终端terminal,输入以下命令。

$ npm install -g hexo-cli

即可使用npm完成hexo安装;

建站

安装 Hexo 完成后,执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件。

$ hexo init 文件夹名称    #在本地创建文件夹
$ cd 文件夹名称        #进入该文件夹进行操作
$ npm install 

至此,全部安装工作已经完成!刚init的文件夹就是你的博客根目录,所有的操作都在里面进行。

测试

安装完后可在本地测试下是否正确安装完成;使用以下命令:

$ hexo g   #生成
$ hexo s   #开启本地服务

当终端显示以下内容:

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

则可在浏览器地址栏直接访问http:localhost:4000 查看默认配置的网站了!

目录介绍

.
├── .deploy
├── public
├── scaffolds
├── scripts
├── source 
|   ├── _drafts
|   └── _posts
├── themes
├── _config.yml
└── package.json
  • .deploy:执行hexo deploy命令部署到GitHub上的内容目录
  • public:执行hexo generate命令,输出的静态网页内容目录
  • scaffolds:layout模板文件目录,其中的md文件可以添加编辑
  • scripts:扩展脚本目录,这里可以自定义一些javascript脚本
  • source:文章源码目录,该目录下的markdown和html文件均会被hexo处理。该页面对应repo的根目录,404文件、favicon.ico文件,CNAME文件等都应该放这里,该目录下可新建页面目录。
  • _drafts:草稿文章
  • _posts:发布文章
  • themes:主题文件目录,更换主题直接把网上的主题放到这个文件夹,再改下_config.yml里theme名称的即可;
  • _config.yml:全局配置文件,大多数的设置都在这里
  • package.json:应用程序数据,指明hexo的版本等信息,类似于一般软件中的关于按钮

重点说下_config.yml 文件通过 _config.yml文件配置站点的基本信息。比如以下内容:

# Site
title: 精靈社記
subtitle: 倾听一个年轻人的想法与分享
author: Julian Xu
language: zh-CN
deploy设置

在刚刚那个_config.yml文件最下面找到以下内容:

deploy:
  type: git
  repo: git@github.com:xujune0/xujune0.github.io.git
  branch: master

type 填git;

repo 填你在github添加的仓库地址;

弄完之后,且配置了SSH公钥,则可直接在终端执行deploy命令,即可将内容发布到github上,此时可访问 http://your_user_name.github.io

$ hexo d 

命令

常用命令
hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口(默认端口4000,'ctrl + c'关闭server)
hexo deploy #将.deploy目录部署到GitHub
常用复合命令
hexo deploy -g
hexo server -g  
命令简写
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

后记

简单介绍了安装hexo的过程,总体而言,安装并不难。过程中也走过一些坑,比如配置文件缺少空格会报错。对于主题,如果你满意默认的配置的话,很快就能用了。但如果你想像我一样,去找主题,并做些修改的话,得花一些时间。过程中还遇到了个mixcontent的问题,github使用https传输导致我主题部分外链http的CSS样式被block掉了。对于技术小白,也只能通过百度搜索解决办法,最后把外链的样式copy到本地,链接到本地来才勉强解决。

生命不息,折腾不止!昨天晚上折腾到凌晨两点。而此刻,对于此博客平台,貌似还有许多要修改的地方。待日后有时间再慢慢修整。

—— Julian Xu 后记于 2016.08



扫一扫关注微信公众号

微信公众号二维码