0%

我的第一篇文章


简介

我是JessieK,从学校起开始自学android,很幸运,毕业后顺利从事android开发,学校里为数不多的女coder之一(相信读计算机的女生会深有感触~( ̄▽ ̄)ブ,在浏览博客的时候发现,不少女coder很牛逼的,相信不久的 将来,越来越多的女生会进入到这个行业,成为行业中的精英)有人可能会疑惑,女生从事这个职业的很少,为什么会选择这条路呢?很简单,因为热爱。俗话说搜索引擎是我们最好的老师,跟很多刚入门的小伙伴一样,从学习编程以来,浏览过无数牛人的博客,十分敬仰,他们对代码的热情和敬业精神让我感到深深佩服,很早就希望拥有自己的技术博客,但苦于公司业务多,经常加班,没时间搁置了,现在总算闲下来了,其实闲下来也挺不安的,有种坐吃等死的感觉,作为一个有信仰的coder,学无止境啊,想结合平时的学习和工作,写点文章,准备折腾下自己的博客了。


博客搭建之路

说来有些惭愧,由于长久以来从事android开发,对前端的东西并不是很了解,随着小程序和react native的火热,我觉得是有必要去学习的,不过现在也不可能花掉巨大的学习成本后再弄博客吧,我也不想花钱去买收费的云空间,立马让我想到了GitHub,我知道现在的博客框架很多,相信能快速搭建出来,准备找个免费的云空间和博客框架,搭一个博客,只是简单纯粹的写作,经过google以后,发现大多数人都推荐GithubPage+Hexo来搭建免费博客,然后就开始了自己的折腾之旅。

Hexo是什么?

Hexo 是一个快速、简洁且高效的博客框架。Hexo使用Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。说白了,就是集各种博客管理插件和多款主题于一身的能快速搭出博客的框架。

GitHubPage是什么?

GitHubPage主要的用法有两种。一种是你的 GitHub 用户名建立的 username.github.io,这个是GitHub自动为每一个用户分配的域名,如果仅仅是建立个人博客的话,这种方法就可以了,另一种是依附项目的 Project Pages。具体用法请参考: Github Pages官方文档

搭建环境

1. 必须先安装以下环境

由于工作原因,我经常是mac和windows来回切换,安装方式有很多,可以用控制台安装,这里面花样就很多了,也可以去官网下载安装包,不管是mac还是windows,需要设置全局变量,保证node.js和git的命令行使用,我是直接在官网下载的安装包,安装完后,已经自动配置好了。

  1. 安装Hexo
    通过npm命令即可安装。

    npm install hexo-cli -g
    npm install hexo –save

如果命令无法运行,可以尝试更换taobao的npm源
npm install -g cnpm –registry=https://registry.npm.taobao.org
创建博客的工程目录文件夹,如blog文件夹。进入该文件夹根目录,利用hexo框架进行初始化。

$hexo init

$npm install

hexo目录结构

其中主要使用的文件夹
public是需要上传到github的文件
themes为下载的主题文件
source为页面文件,包括头像文件,关于页面,所有上传的文章
可以先测试一下
hexo g
hexo s
此时控制台打印一个地址http://localhost:4000/
mac下使用iterm就可以直接点击跳转
windows下使用cmder按住ctrl就可以点击跳转
注意,所有hexo命令必须要在初始化后的文件夹根目录下(即执行过 $hexo init的文件夹根目录)
常用的Hexo命令
新建文章

$ hexo new "xxx"  可以简写为 $ hexo n

新建页面

$ hexo new page "xxx" 

生成资源文件

$ hexo g 

本地预览

$ hexo s

部署到github

$ hexo d

还可以使用一些组合命令:
生成资源文件并部署

$ hexo d -g

生成资源文件并预览

$ hexo s -g 
  1. 配置GitHub Page
  • 我们需要新建一个项目来存放GitHub Page,new repository。(在这里踩过坑,由于采用的是username.github.io来建立博客,所以必须保证填写repository name的时候,格式一定要严格按照username.github.io,且这里的用户名username与GitHub完全一致。)

如果本机没有生成过ssh密钥(路径 C:/Users/用户名/.ssh/),我们需要生成一对密钥
控制台输入以下命令,填写你的邮箱

$ssh-keygen -t rsa -C "your_email@example.com"

Generating public/private rsa key pair.
Enter file in which to save the key (/c/Users/you/.ssh/id_rsa): [Press enter]
这个时候直接回车就好,你也可以输入特定的文件名,如/c/Users/you/.ssh/id_rsa来保存

Enter passphrase (empty for no passphrase): [Type a passphrase]
Enter same passphrase again: [Type passphrase again]
这个时候不写密码也可以
密钥创建成功后,输入

clip < ~/.ssh/id_rsa.pub

复制你的公钥到剪切板
接着,需要在github的设置界面添加你的公钥
title:只要自己能区分是哪台电脑的公钥就行
key:刚才复制的公钥
然后保存

到blog文件夹根目录找到_config.yml
配置文件的最后

deploy:
  type:

改为:

deploy:  
  type: git
  repository: http://github.com/yourname/username.github.io.git
  branch: master

这里的repository地址就是github项目页面的https地址
保存后,控制台输入

$ hexo g

$ hexo d

这里才过坑,报一个错误
ERROR Deployer not found: git
找不到hexo的git插件,这时我们需要安装这个插件
控制台输入

$ npm install hexo-deployer-git --save

部署成功后就可以通过username.github.io访问了

Hexo有很多主题可供下载,可以去官网挑选,需要根据该主题的文档进行配置官网主题,同时还有很多博客管理插件,可供下载官网插件
我选择了一个star最多的主题NexT,它内置3种外观,而且配置文档十分详细NexT官网
到此,第一篇文章结束了,我的博客之旅从此开始~

后续

随着开源中国(oschina/码云)的发展,推出了类似githubPage的东西,码云也自动为每一个用户分配 username.gitee.io的域名,适合搭建免费的个人博客,不需要太多的维护成本,大家都懂的github在国内使用的弊端,这个搭建的博客速度明显快很多,算是很良心了(不像Coding Pages还有广告跳转页orz…但愿它能一直良心下去),而且它还有免费的私有仓库。搭建的过程跟githubPag差不多,项目名称和仓库路径都必须和你的用户名一致。

2017-09-07记

mac下,hexo任何命令都报错Error: Cannot find module './build/Release/DTraceProviderBindings'
google了许久,先是

1
2
$ npm uninstall hexo
$ npm install hexo --no-optional

无效

接着

1
2
$ npm uninstall hexo-cli -g
$ npm install hexo-cli -g

依旧无效

最后卸载dtrace-provider这个组件

1
npm uninstall dtrace-provider

终于正常了
据说安装 hexo-cli 的时候依赖了该组件

2018-10-16记

mac下,修改文章的名字大小写无效问题,由于mac和windows下git本身就忽略大小写,所以导致修改了文章的名字大小写本地生成正常,远程仓库死活不更新的问题。
解决方案:

  1. 进入博客目录.deploy_git文件夹下的.git文件夹,修改里面的git配置文件config,把ignorecase = true改为ignorecase = false,让git不要忽略大小写
  2. 如果你仅仅是做了上一步的话,再次上传会生成一个大写的文件夹和一个小写的文件夹,需要先删除git缓存中的博客目录下的 .deploy_git 文件夹下的所有文件,再 push 一次,博客目录下执行
    1
    2
    3
    4
    cd .deploy_git
    git rm -rf *
    git commit -m 'clean all file'
    git push
  3. 此时再重新生成上传就没有问题了,博客目录下执行hexo clean && hexo g && hexo d