博客搭建
关于使用github+hexo进行博客搭建
本次搭建需要git和js的环境,接下来按照步骤讲一下:
git安装
官方下载地址:https://git-scm.com/download/win
注意需安装windows-64版本的,在安装好后,直接一路点击next即可,所有的都是默认的(也包括添加到PATH)
安装后验证: 在 cmd 中输入命令 node -v, 查看 Node 版本
node.js安装
官方下载地址:https://nodejs.org/en/
同样安装好后一路直接点击next即可
安装好后就可输入node-v,查看Node版本
安装并初始化hexo
执行以下命令
1 | npm install -g hexo # 通过npm安装hexo |
其中,-g 指定全局安装,之后可以在任意位置使用 hexo 命令
接下来,进入到你要放博客的静态文件的位置,右键,选择 Git Bash Here,打开 Git Bash 之后,输入
1 | hexo init blog # 初始化创建,会在你所在位置创建 blog 文件夹 |
等待 hexo 安装完成。。。
安装完成后,会出现一下这些文件夹以及文件
其中 source 就是存放后面我们写博客的源文件的文件夹
接下来输入
1 | hexo clean # 清除所有记录 |
访问其中域名,会出现下图:
主题设置
如果你不喜欢现在的主题样式可以选择换一个,首先是 官方主题,可以在里面下载自己喜欢的主题。
个人现在使用的是 hexo-theme-yilia。
这里就以这个主题为例:
先按 Ctrl + C,断开刚刚的服务,然后输入
1 | git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia |
下载后的主题在 themes 里面,如图:
回到 blog 文件夹,用记事本打开 _config.yml
,修改里面的 theme: landscape
为 theme: yilia
之后重新输入
1 | hexo clean # 清除所有记录 |
再访问上面那个本地网址,就可以看到主题已经切换了
解决图片路径问题
绝大多数资料都是安装hexo-asset-image的插件,但是用到后面会发现对于markdown图片路径没有用啊!比出现问题更折磨人的是遇上一堆错误的解决方法…如果用hexo-asset-image后面可能面临各种各样的报错
我想要寻找在本地和网页上都能显示的办法,终于发现了一款插件hexo-image-link
,是将markdown图片路径转换为asset_img语法,使得图片能够同时显示在typora和hexo上。使用命令下载:
1 | $ npm install hexo-image-link --save 或者 |
接下来还需要修改一下 _config.yml
1 | …… |
之后你只需要学博客是输入
1 | hexo new test # test就是新博客文章的名字 |
就会在 source/_posts
下,会同时生成test目录和test.md 网页,将需要的图片放置到test目录下,test.md就可以正常解析了。如图:
配置SSH KEY
为什么要配置这个呢?因为你提交代码肯定要拥有你的 github 权限才可以,但是直接使用用户名和密码太不安全了,所以我们使用ssh key来解决本地和服务器的连接问题。
先输入
1 | cd ~/.ssh #检查本机是否已存在的ssh密钥 |
如果提示:No such file or directory
说明你是第一次使用git。
1 | ssh-keygen -t rsa -C "邮件地址" |
然后连续3次回车,最终会生成一个文件在用户目录下,打开用户目录(C:\用户\你的用户名\),找到.ssh\id_rsa.pub文件,记事本打开并复制里面的内容,打开你的github主页,右上角进入设置 -> SSH公钥
在新的SSH密钥那里将我们上面复制的内容粘贴进去即可
测试SSH连接是否成功
1 | ssh -T git@github.com #注意,'T'是大写的 |
如果提示Are you sure you want to continue connecting (yes/no)?,输入yes,然后会看到:
1 | Hi 你的github用户名! You’ve successfully authenticated, but GitHub does not provide shell access. |
看到这个信息说明SSH已配置成功!
接下来还需要配置用户名和邮箱:
1 | git config --global user.name "xxx" #你的 github 用户名,即注册时的用户名,个人主页最大那个就是了 |
github上创建相关库
接下来讲讲怎么在github上创建相关库
在1的地方填写库名,一定是用户名.github.io
将2的地方勾上,再点击创建即可
上传到github
如果你一切都配置好了,发布上传很容易,一句 hexo d
就搞定,当然关键还是你要把所有东西配置好。
首先,ssh key肯定要配置好。
其次,配置_config.yml中有关deploy的部分:
1 | deploy: |
_config.yml
这里面都是一些全局配置,每个参数的意思都比较简单明了,所以就不作详细介绍了。
需要特别注意的地方是,冒号后面必须有一个空格,否则可能会出问题。
接下来我们还需要安装一个插件,在 git bash 下输入
1 | npm install hexo-deployer-git --save |
这下就搞定啦