如何优雅的做一个简单的个人博客
用途:
记录生活,记录成长
需要:
.ubuntu为例(windows,mac均可)
.note.js :基于ChromeV8引擎的 JavaScript 运行环境
.nvm : node.js多版本管理工具
.hexo :基于Node.js的静态博客框架
.git : 分布式版本控制系统,用于本地hexo内容上传至github
.github:注册账号,项目托管平台,提供免费空间
步骤:
一.注册github
建立与用户名对应的仓库,仓库名必为【your_user_name.github.io】,将来博客的访问地址就是 http://your_user_name.github.io
二.安装git
1.git同步基于ssh协议,先安装ssh:
sudo apt-get install openssh-server openssh-client
2.启动ssh服务:
sudo /etc/init.d/ssh restart
3.安装git:
sudo apt-get install git
4.配置ssh公钥,在本地生成ssh公钥,邮箱即为注册github的邮箱
ssh-keygen -C ‘your emaildress’ -t rsa
5.上传ssh公钥至github
github头像-settings-ssh and gpg keys-new ssh key
将~/.ssh/id_rsa.pub中的内容复制进去。
6.测试git连接github是否畅通
ssh -T git@github.com
7.git配置
git config –global user.name “your_user_name” #注册github的用户名
git config –global user.email “xxx@xxx.com“ #注册github的邮箱
三、node.js安装
1.先安装nodejs版本管理工具nvm
git clone https://github.com/creationix/nvm.git
2.添加如下代码到系统变量.bashrc(sudo gedit ~/.bashrc)
source ~/.nvm/nvm.shr
3.查看可以使用的node.js版本
nvm ls-remote
4.下载安装需要的node.js版本
nvm install【vision】
四、安装hexo
1.安装命令
npm install -g hexo-cli
2.建立hexo工作站,folder的位置即为本地博客存放地址
hexo init【folder】
cd 【folder】
npm install
3.预览hexo自动生成的博客
hexo s
五、上传博客文件到github
1.在hexo工作站根目录下的配置文件_config.yml中配置部署信息
deploy:
type: git
repo: git@github.com:your_user_name/your_user_name.github.io.git
branch: master
message: '站点更新:{{now("YYYY-MM-DD HH:mm:ss")}}'
2.安装hexo插件
npm install hexo-deployer-git –save
3.上传代码至github
hexo d
六、修改博客主题、写博客
1.修改博客的主题,以yilia主题为例,下载的主题在themes/yilia
cd【hexo工作站目录】
git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia
2.修改hexo工作站根目录下的_config.yml文件
theme: landscape改为theme: yilia
3.重新生成并预览
hexo s -g
常用hexo命令
hexo g 生成
hexo s 本地预览
hexo d 上传至GitHub服务器
hexo s -g #生成并本地预览
hexo d -g #生成并上传
hexo clean #清理 public内容,解决莫名显示异常
4.yeid主题头像设置,排版设置
修改themes/yilia目录下的_config.yml文件
头像放置于:“themes\yilia\source\img”路径中
为了避免点击头像和博客名返回“null”地址,请修改“themes\yilia\layout_partial\left-col.ejs”文件的第6行和第9行:
img标签的src为”/“,h1中a标签的href改为”/“。
注意:每次修改后都需要执行hexo g命令使更改在本地生效,执行hexo d命令使更改在云端生效
5.写博客,进入hexo工作站根目录,执行命令:
hexo n “article_name”
6.hexo自动在_posts下生成相关md文件
打开md文件就可编辑博客文章
title: article_name #文章页面上的显示名称
date: 2017-06-03 20:00:00 #文章生成时间
tags: tags1,tags2 #文章标签,可空
默认情况下,生成的博文目录下会显示全部的文章内容,
可以再合适的位置加上<!--more-->
7.博文中插入图片
修改hexo配置文件_config.yml,post_asset_folder: false 为true
npm install hexo-asset-image –save
hexo n “x”新建博文时,/source/_posts文件夹中除了名为x.md文件外还有一个名为x的文件夹
图片放到x文件夹中,如下命令引用

8.博文部分内容不渲染
{% raw %}不渲染内容{% endraw %}
-2017.06.03