为什么要搭建博客,写博客呢?
先简单说一下,首先不管你是不是做开发的,自己动手来搭建一个博客,这本来就是一件很酷的事情,在程序员的世界里都很酷,更别说其他行业的了,本篇教程在发至公众号前做了很多整理优化。
自己搭建的才是真正属于自己的东西,我的底盘我做主,不用受限于各种约束。在学习成长的路上,记录下来,真的很有意义,记录不仅会大幅度提高你的写作水平,还会间接提高你的语言表达能力,还可以帮助他人,就比如有一天我 Google 搜有关的材料,我自己写的博客竟然出来了,当然现在有了点击率,我的这些文章都可以在百度,Google 上输入关键字搜索到。
现附上搭建成功的,堪称简洁优雅的博客效果!
网上关于搭建博客教程的数不胜数 , 那为什么我还要重复「造轮子」呢!
Google 和百度上的种种教程 , 我简直是无力吐槽 。对于有从业经验的朋友们来说这些教程足矣 , 因为我们有一定解决问题和克服难题的能力 , 解决的大部分问题都源于我们的经验。
所以这篇教程仅对于新手做一个正确引导 , 简单粗暴 , 浅显易懂。初心 - 为的是让新入门的兄弟看到一个不会被误导的良心教程。
开始搭建 , 请细心做好每步
安装Node.js
关于软件的安装我真的是一句废话都不愿意说 , 你一路点击 next 就 ok 了 , 以下不再解释。
windows 32 位安装包下载地址
windows 64 位安装包下载地址
官网下载地址 各种系统以及版本都可以找到
安装Git
Git 下载地址
安装 Git 后打开 git bash 界面 , 也就是 git 命令窗口 , 以下的所有命令操作全部在此窗口进行 , 别一会儿 cmd 一会儿 git。
注册GitHub
关于账号的注册简直不宜多说 , 只要你注册过微信 qq
自行登录GitHub官方网站注册账号 (https://github.com)
点击 Sign up 注册
检查 SSH key 设置
首先我们需要检查你本机的ssh key 秘钥
$ cd ~/. ssh
如果提示:No such file or directory 说明你是第一次使用git。
生成新的 SSH key
注意1: 此处的邮箱地址,你要输入自己的邮箱地址
注意2: 此处的「-C」的是大写的「C」
$ ssh-keygen -t rsa -C "邮件地址@youremail.com"
-- 接着会出来以下提示
Generating public/private rsa key pair.Enter file in which to save the key (/Users/your_user_directory/.ssh/id_rsa):<回车就好>
然后系统会要你输入密码:
-- 注意:输入密码的时候没有*字样的 , 也就是你输入了而命令行窗口上什么都没有,直接输,不用管。
Enter passphrase (empty for no passphrase):<输入加密串>Enter same passphrase again:<再次输入加密串>
在回车中会提示你输入一个密码 , 这个密码会在你提交项目时使用 , 如果为空的话提交项目时则不用输入。这个设置是防止别人往你的项目里提交内容。
最后如果没有异常信息出现 , 就成功设置ssh key了
添加 SSH key 到 GitHub
打开本地C:\Documents and Settings\Administrator.ssh\id_rsa.pub文件
此文件里面内容为刚才生成人密钥。如果看不到这个文件,你需要设置显示隐藏文件。准确的复制这个文件的内容,才能保证设置的成功。
登陆github系统。
点击右上角头像处的下拉列表 Settings--->SSH and GPG keys ---> 右上角 New SSH key
把你本地生成的密钥复制到里面(key文本框中), 点击 add key 就ok了
测试
可以输入下面的命令 , 看看设置是否成功,git@github.com的部分不要修改:
$ ssh -T git@github.com
如果是下面的反馈:
The authenticity of host 'github.com (207.97.227.239)'
can't be established.RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.
Are you sure you want to continue connecting (yes/no)?
```
不要紧张 , 输入yes就好 , 然后会看到:
Hi cnfeat! You've successfully authenticated, but GitHub does not provide shell access.
####设置用户信息
现在你已经可以通过SSH链接到GitHub了 , 还有一些个人信息需要完善的。
Git会根据用户的名字和邮箱来记录提交。GitHub也是用这些信息来做权限的处理 , 输入下面的代码进行个人信息的设置 , 把名称和邮箱替换成你自己的 , 名字必须是你的真名 , 而不是GitHub的昵称。
$ git config --global user.name "userName"//你的用户名
$ git config --global user.email "userName@163.com"//填写自己的邮箱
-- 查看用户名密码去掉后面的双引内容
####SSH 配置成功
本机已成功连接到github
如有问题 , 请重新设置 , 常见错误参考
[http://help.github.com/articles/generating-ssh-keys](http://help.github.com/articles/generating-ssh-keys)
[http://help.github.com/articles/error-permission-denied-publickey](http://help.github.com/articles/error-permission-denied-publickey)
####使用GitHub 建立博客
登录后系统,在github首页,点击页面右下角「New Repository」
填写项目信息:
**Repository name:**userName.github.io 注意:userName为你的用户名
**Description (optional):** --描述
注:Github Pages的Repository名字是特定(两个要一致)的,比如我Github账号是cnfeat,那么我Github Pages Repository(GitHub仓库)名字就是cnfeat.github.io。
每个帐号只能有一个仓库来存放个人主页,而且仓库的名字必须是username.github.io,这是特殊的命名约定。完了你可以通过[http://username.github.io]
(http://username.github.io/) 来访问你的个人主页。
点击「Create Repository」 完成创建。
####安装Hexo
Hexo的作者是[tommy351](https://github.com/tommy351/hexo),根据[官方介绍](http://hexo.io/docs/index.html),Hexo是一个简单、快速、强大的博客发布工具,支持Markdown格式。
在「我的电脑」中任意选择一个盘新建「Hexo」文件夹 , 比如我在 D 盘建的 , 打开 git 窗口输入以下命令
打开 git , 运行Hexo 安装命令
```
$ npm install -g hexo
进入到 Hexo 目录下
$ cd D:/Hexo
运行如下命令 , Hexo随后会自动在目标文件夹建立网站所需要的所有文件。
$ hexo init
现在已经搭建起来一个本地博客了 , 输入以下命令验证
$ hexo g
生成
$ hexo s
- 启动服务本地预览 (预览完要停止键盘按下 Ctrl + C 停止本地预览)
然后到浏览器输入localhost:4000看看 , 一个初始博客映入眼帘
更换博客主题
注意:以下每更换一次主题 运行 hexo g 之前运行如下命令
$ hexo clean --因为主题换了 你需要clean以下老主题生成的缓存
运行了此命令之后再 hexo g(生成) 和 hexo s(启动本地服务) 进行预览
复制主题
这里推荐我的主题 , 先搭起来 , 可根据你的喜好另行设置,我是挺喜欢这个主题的,够简洁
$ git clone https://github.com/smartbeng/hexo-scribble
配置复制的主题
修改Hexo目录下的config.yml配置文件中的theme属性,将其设置为jacman
启用主题
从Hexo的根目录进入你复制的主题目录
$ cd themes/hexo-scribble
$ git pull -- 推送
$ hexo g -- 生成
$ hexo s -- 启动本地预览
1.操作完之后浏览器输入 localhost:4000 看一下有没有
2.这里我说一点 , 调主题样式后面再调 , 先把博客搭建起来 , 别瞎搞
3.切记如果没有 hexo clean 一下 , 再去 hexo g 和 hexo s
4.注意:为避免出错,请先备份你的_config.yml 文件后再升级
这里有必要提下Hexo常用的几个命令:
hexo generate (hexo g) 生成静态文件,会在当前目录下生成一个新的叫做public的文件夹
hexo server (hexo s) 启动本地web服务,用于博客的预览
hexo deploy (hexo d) 部署播客到远端(比如github, heroku等平台)
另外还有其他几个常用命令:
$ hexo new "postName" #新建文章
$ hexo new page "pageName" #新建页面
postName 是你自己起的文章名字 , 内容就在这里面写
注意:重点来了
生成的文章会存在于 Hexo\source_posts 目录下
文章默认是一个.md的格式 , 意思它用的是 Markdown 语法 , 不知道的百度 , 关于语法的问题不知道的完了学 , 先下载一个 Markdown编辑器
Markdown 编辑器我喜欢用 Typora , 自行搜索下载
如果不知道Markdown 的 语法写作 , 先随便在上面写点东西为了测试,之后再学习,就几个标记,很简单
写完之后 Ctrl + S 保存
那怎么在本地预览自己写的博客或者增加后的博客呢
首先在命令窗口切换回 Hexo 目录下 , 而不是你复制的主题目录下
$ cd Hexo
然后再 hexo g(生成网页) 接着hexo s(启动本地服务) , 浏览器查看效果( localhost:4000 )
常用简写
$ hexo n == hexo new --新建文章
$ hexo g == hexo generate --生成页面
$ hexo s == hexo server --启用本地浏览器预览(localhost:4000)
$ hexo d == hexo deploy --部署博客```
常用组合
$ hexo d -g #生成部署$ hexo s -g #生成预览
重头戏 , 将你复制的主题以及所写文章成功关联到 GitHub 链接 , 就可以通过 username.github.io 访问啦
在这里教大家一个快捷方式 , **一键部署**博客到 GitHub
进入 Hexo 的根目录 接着操作以下命令
$ cd Hexo
######注意 1:现在我们需要clone我们自己的GitHub仓库了
######注意 2:切记下面是**你自己的仓库名** , 把名字都改过来 , 下面我用的是我的仓库名字
$ git clone https://github.com/storm/
strom.github.io.git .deploy/storm.github.io```
翻译下这条命令的意思
1.将我们之前创建的GitHub 仓库克隆到本地 , 命令会新建一个目录叫做.deploy用于存放克隆的代码。
2.然后会在.deploy文件夹下生成一个 你的名字.github.io 的文件夹用于存放文件
3.接着在 Hexo 根目录下创建一个 .txt 文件 , 把下面的命令复制进去
4.注意 :你的GitHub名字是什么就把你的名字全部改到下面 , 细心点
hexo generate
cp -R public/* .deploy/jacman.github.io
cd .deploy/jacman.github.io
git add .
git commit -m “update”
git push origin master```
4.将这个 ***.txt 文件的后缀改成 .sh*** , 它就变成了脚本文件 , 我们就将文件改成 ***deploy.sh*** 吧!意思就是部署
5.从此以后需要部署本地博客到 GitHub , 直接可以双击这个文件 , 他会弹出提示 , 需要输入 GitHub 的用户名跟密码 , 是不是很高大上
####见证奇迹的时刻
你的主题改完还没有推送到GitHub , 所以你需要在 git 命令窗口先进入主题目录 Hexo/themes/jacman , 运行如下命令
$ cd themes/jacman$ git pull $ hexo g --生成本地(主题)
切记这里不要用 hexo d 命令 , 好了 , 往下看
现在切回到Hexo的根目录下 , 我的在 D 盘 , 我就输入以下命
$ cd D:/Hexo
如果你想改博客内容 , 随时都可以 , 进入 D:\Hexo\source_posts 目录下 , 右键你所创建的文件用Markdown编辑器打开 , 编辑完 Ctrl + S 保存关掉窗口就行了 , 紧接着往下走就OK
接着输入下面的生成命令
$ hexo g
**最后一步 , 发布博客**(发布之后访问会有延迟 , 别着急)
双击我们刚在Hexo 目录下编辑的 deploy.sh 脚本文件 , 然后默默的输入 GitHub 用户名和密码 , 完了之后就去访问你的个人博客网页吧!就是你的 GitHub 仓库名 [https://username.github.io](https://username.github.io) (username 是你的用户名呀哥 , 别搞错)
也就是说:以后你发布博客只需要两步 , Hexo 根目录下 运行 hexo g , 之后点击 depploy.sh 脚本!
**以后如果你第二次**修改了新的主题 , 在修改完 Hexo 下的 _config.yml 之后请进行以下操作
$ cd Hexo/themes/jacman -- 当然是先进入主题的目录了
$ hexo clean --然后clean一下老主题
$ git pull
$ hexo g -- 生成
此时再进入 Hexo 的根目录下
$ hexo g```
然后直接双击 Hexo 下的 deploy.sh 脚本吧!等着输入用户名密码就OK
如果不出意外,你会看到一个跟我博客一样主题的你的专属博客映入你的眼帘,这句话有点长,哈哈
请注意这里有个大坑
_confing.yml 下 timezone 配置不能错
timezone: zh-CN #能配置成 +08:00 类似的
上面那个也有不对的,如果设置cheng +08:00 后 momentjs解析会报异常
需要将timezone配置成 时区名称
timezone: Asia/Shanghai
关于域名的绑定看我解释 , 不需要域名的 , 比如我的用户名是 smartbeng , 就可以通过 (https://smartbeng.github.io) 来访问我的博客了。绑定自己的域名买域名都是后话了 , 等你富裕了可以完全买一个绑定在这里 , 比如我去买一个 www.smart.com , 完了绑定在GitHub , 以后就可以访问这个链接来到我的博客了 , 绑定很简单 , 自行网上搜索。为了不对新手造成误导 , 就把这个省略了 , 因为有人问我是不是一定要绑定域名 , 可见某些教程误导了新上手的同学。
基于Hexo 的我的博客主题地址 https://github.com/smartbeng/hexo-scribble
欢迎 Fork , 欢迎 Pull requests , 感觉这个教程有帮助的起码别忘了给我的 GitHub Star 哈 , 感谢!祝愿大家在这条路上越走越远 , 不断突破自己 , 让自己变得更加出众!
最后说两句 , 关于本主题的配置百度一搜就有 , 比如我们用的jacman的主题 , 你就搜jacman 的主题配置, 关于样式的调整 , 如果你是一个追求完美的人 , 那你就要在这上面用点心思了 , 比如说调 CSS 样式什么的 , 哈哈你懂得!如果感觉本教程不错欢迎大伙儿推荐给没搭建的朋友们来踩 , 感谢!