最近心血来潮,想搭建个人博客,就把搭建过程整理了一下,顺便进行记录,以备将来查看
一.创建GitHub仓库,配置SSH
创建仓库
配置SSH key
输入命令
git config --global user.name "yourname" git config --global user.email "youremail"
yourname和youremail分别对应github的用户名和邮箱
然后开始生成密钥,输入命令
ssh-keygen -t rsa -C "youremail"
按提示回车、输入密码等即可生成SSH key,可以通过
~/.ssh/id_rsa.pub
可以获得SSH key如下图:
将获得的SSH key复制,打开
github
->settings
->SSH and GPG keys
输入
ssh -T git@github.com
查看是否成功,如下出现你的用户名就表示成功
二.安装博客需要的框架
- 安装 Homebrew
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
如果出现错误curl: (7) Failed to connect to raw.githubusercontent.com port 443: Connection refused
,如下
错误原因:判定是DNS污染
解决办法:地址
1.下载一个修改host的软件,例如switchhosts
2.复制输入如下地址
199.232.68.133 raw.githubusercontent.com
199.232.68.133 user-images.githubusercontent.com
199.232.68.133 avatars2.githubusercontent.com
199.232.68.133 avatars1.githubusercontent.com3.激活
命令行执行成功的话会下载东西,如下:
三.创建文件夹
在需要的地方新建个空文件夹
blog
新建个终端窗口,
cd
到文件夹里初始化,
hexo init
,如下所示
完成后文件夹会多一些文件,如下所示:
四.安装博客相关插件
自动部署到github的插件
npm install hexo-deployer-git --save
安装atom生成插件,便于感兴趣的小伙伴们订阅(RSS订阅)
npm install hexo-generator-feed --save
然后在本地Blog根目录下的_config.yml文件中,添加以下配置
# Extensions ## Plugins: http://hexo.io/plugins/ #RSS订阅 plugin: -hexo-generator-feed #Feed Atom feed: type: atom path: atom.xml limit: 20
在主题目录下的_config.yml目录下,添加如下配置
rss: /atom.xml
安装博客首页生成插件
npm install hexo-generator-index --save
安装tag生成插件
npm install hexo-generator-tag --save
至此,需要安装的已安装完毕
五.创建博客、调试、发布
由于之前已经创建过文件夹,这一步可以忽略,如果没有,可以执行如下命令来创建个文件夹
hexo init Blog
撰写博客内容
cd
到Blog
文件夹下,执行命令hexo new testBlog
其中
testBlog
是博客的名字,在Blog/source/_posts
中就会新建个testBlog.md
的文件,然后就可以编辑你的博客内容了本地调试
sudo hexo server 或 sudo hexo s
然后可以访问http://localhost:4000来查看结果,如下图所示
安装发布插件
在博客文件夹运行下面命令
npm install hexo-deployer-git --save
部署到github
在
_config.yml
文件的最后一行修改配置
运行生成发布博客
sudo hexo clean sudo hexo g sudo hexo d
其中
hexo clean
清除之前生成的东西,也可以不加hexo g
是hexo generate
的缩写,生成静态文章hexo d
是hexo deploy
的缩写,部署文章
稍等一会,在浏览器访问网址: https://你的用户名.github.io 就会看到你的博客啦!!
六.自定义博客
1.更换主题
可以通过克隆的方式,把主题克隆到项目/themes
路径下,Hexo也有很多主题
这里以matery主题为例
在blog文件下运行下面命令,将主题克隆下来
git clone https://github.com/blinkfox/hexo-theme-matery themes/matery
结果如下:
其中
_config.yml
文件可以查看该主题的配置信息
主题下载好后,打开blog
文件夹的_config.yml
,修改theme
的内容,如下
然后运行一下命令
sudo hexo g
sudo hexo d
之后就可以看到修改过的新主题了
同时该主题有很多插件可以使用,设置下就行,例如字数统计等,具体可以参考https://github.com/blinkfox/hexo-theme-matery/blob/develop/README_CN.md
七.文章相关设置
- 使用
hexo new 文章名称
命令新建一个blog,顶部会Front-matter
可以进行设置,非必填项,但title
和date
建议要有,如下
Front-matter选项详解
最简示例:
---
title: typora-vue-theme主题介绍
date: 2018-09-07 09:25:00
---
最全示例:
---
title: typora-vue-theme主题介绍
date: 2018-09-07 09:25:00
author: 赵奇
img: /source/images/xxx.jpg
top: true
cover: true
coverImg: /images/1.jpg
password: 8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92
toc: false
mathjax: false
summary: 这是你自定义的文章摘要内容,如果这个属性有值,文章卡片摘要就显示这段文字,否则程序会自动截取文章的部分内容作为摘要
categories: Markdown
tags:
- Typora
- Markdown
---
为了新建文章方便,可以修改下文章模板,把希望带的字段加进去,路径是/scaffolds/post.md
新建文章自动打开本地Markdown编辑器
写文章时,在控制台执行
hexo new "文章名"
就会在source/_posts/
下生成一篇新的.md
文件,但需要手动打开,显得比较麻烦,可以通过以下方式设置成新建文章时自动打开编辑器在博客的根目录下新建一个文件夹
scripts
(如果有就不用新建),在此目录下新建一个Javascript文件,文件名据说可随意命名,这里命名为auto_open.js
js文件里添加如下内容:
>var exec = require('child_process').exec; >hexo.on('new', function(data){ // 请将 Typora 替换为你用的Markdown 编辑器 exec('open -a "Typora.app" ' + data.path); >});
重新部署后,新建文章就可以打开编辑器了
八.增加百度和谷歌的搜索引擎验证
1.验证站点,此处以HTML标签验证
的方法验证
百度验证
首先打开百度搜索引擎验证,输入博客网址,按提示走,选择
HTML便签验证
,然后将下方的代码复制下来,网页先不要关
谷歌验证
打开谷歌搜索引擎验证,输入博客地址
下一步中,选择其他验证方法的
HTML标记
,复制meta
中的代码
打开本地博客主题下的
layout/_partial
文件夹,有一个名为head
的文件,将上面获得的两行代码粘贴到<head></head>
之间,保存文件,然后分别执行以下命令部署到Github服务器sudo hexo clean sudo hexo g sudo hexo d
然后分别点击刚才百度、谷歌的验证按钮进行站点验证
2.生成站点地图
安装
sitemap
插件npm install hexo-generator-sitemap --save npm install hexo-generator-baidu-sitemap --save
打开本地博客目录下的
_config.yml
文件,修改url参数为你的博客的首页地址url: http://jonzzs.cn # 修改成你博客的首页地址 root: / permalink: :year/:month/:day/:title/ permalink_defaults:
添加以下配置
# 自动生成sitemap sitemap: path: sitemap.xml baidusitemap: path: baidusitemap.xml
重新部署到github
sudo hexo clean sudo hexo g sudo hexo d
3.将站点地图提交到谷歌
打开谷歌站点控制台,输入
sitemap.xml
,提交
4.百度推送
百度主动推送
在进行操作前,先在百度搜索平台处获取相关信息,
注册的域名
和token
,如下图在根目录下,安装插件,使用以下命令:
npm install hexo-baidu-url-submit --save
然后,修改根目录下的
_config.yml
文件,增加如下内容baidu_url_submit: count: 3 ## 提交最新的3个链接 host: https://***.github.io ## 在百度站长平台中注册的域名 token: `上一步中获取的token` ## 请注意这是您的秘钥, 所以请不要把博客源代码发布在公众仓库里! path: baidu_urls.txt ## 文本文档的地址, 新链接会保存在此文本文档里
最后,加入新的deployer:
deploy: - type: git ## 这是原来的deployer repo: https://github.com/yourusername/yourusername.github.com.git //自己的Github仓库地址 branch: master - type: baidu_url_submitter ## 这是新加的
执行hexo deploy的时候,新的连接就会被推送了
百度自动推送
安装自动推送JS代码的网页,在页面被访问时,页面url将立即被推送给百度,修改主题目录下的
layout/post.ejs
文件,添加如下代码:<script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script>
注:百度站点的验证可能需要比较久的时间
九.Hexo、homebrew操作指令
Hexo操作指令
$ hexo clean #清理缓存 $ hexo generate #生成静态文件 $ hexo server #启动本地服务器 $ hexo deploy #部署 或者 $ hexo clean #清理缓存 $ hexo g #生成静态文件 $ hexo s #启动本地服务器 $ hexo d #部署
homebrew操作指令
// 安装 homebrew $ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" // 卸载 homebrew $ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/uninstall)" // 查看版本 $ brew -v // 下载软件:brew install 软件名 如:$ brew install htop, 安装htop // 如需要图形安装的软件 要加cask 如:$ brew cask install google-chrome // 卸载软件:brew uninstall 软件名 如: $ brew cask uninstall google-chrome // 软件搜索:brew search 软件名 如: $ brew search google // 列出已安装的包 $ brew list // 查看软件相关信息:brew info 软件名 如:$ brew info google-chrome // 删除 Homebrew下载的包 $ brew cleanup // 更新 Homebrew $ brew update
这篇是window下的搭建教程,还没来得及操作,先记录下Yafine的Hexo+github 搭建博客 (超级详细版,精细入微)
本文参考了一下文章: