Git-Github-Hexo搭建博客(一)
新建博客以及新电脑使用博客说明
新电脑与新建博客步骤类似,就直接从GitHub中clone的文件放入hexo文件中
注意,好像是不要hexo初始化,直接将clone的文件放入就行
注意,添加node插件,需要哪些后面会说
注意,后面hexo g -d 上传部分
Git + Github + Hexo
- 安装Git
去Git官网根据你的电脑参数,下载对应版本。
- 安装Node.js
在 Windows 环境下安装 Node.js 非常简单,仅须到官网下载安装文件并执行即可完成安装。
- 安装Hexo
- 使用git安装:
npm install hexo-cli -g npm install hexo-deployer-git --save
- hexo初始化
hexo init
以下部分只是针对新建博客, 新电脑不需要的
- 部署到远程
以下操作都是在git中执行
注册github账号(或者coding或者码云)
新建项目
- github注意
项目名称严格为 GitHub账号名 + .github.io
在网页上直接输入该项目名字就可以访问博客了,这是部署到GitHub的最大优势!
- github注意
配置SSH密钥
- 查看是否有密钥
$ cd ~/.ssh
- 不存在的话新建密钥
$ssh-keygen -t rsa -C "" #这将按照你提供的邮箱地址,创建一对密钥 Generating public/private rsa key pair. Enter file in which to save the key (/c/Users/you/.ssh/id_rsa): [Press enter]
+ 相关提示 ``` Enter passphrase (empty for no passphrase): [Type a passphrase] Enter same passphrase again: [Type passphrase again] ``` + 显示信息 ``` Your identification has been saved in /c/Users/you/.ssh/id_rsa. Your public key has been saved in /c/Users/you/.ssh/id_rsa.pub. The key fingerprint is: 01:0f:f4:3b:ca:85:d6:17:a1:7d:f0:68:9d:f0:a2:db ```
在github中添加公钥
- 复制ssh
clip < ~/.ssh/id_rsa.pub
- 进入github的账户设置中,选择ssh keys 直接粘贴
测试
$ ssh -T
+ 反馈 ``` 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 ```
上传github中 并且分流到其他仓库
在congfig中进行设置
# Deployment ## Docs: https://hexo.io/docs/deployment.html https://gitee.com/zzw1024/myBlog.git deploy: type: git repository: github: https://github.com/zzw1024/zzw1024.github.io.git //github项目地址 gitee: https://gitee.com/zzw1024/myBlog.git //码云项目地址 branch: master
- 上传
hexo g -d
如果报错
ERROR Deployer not found: git
再次运行
npm install hexo-deployer-git --save
- 添加域名
只有部署在GitHub不一定需要添加域名,其他仓库都需要
在仓库的项目设置中找到添加域名的项,把你子啊阿里或者其他地方买的域名写入
- 阿里购买域名
登录阿里云,选择域名进行购买,购买完成后选择自己的后台控制,进行域名解析,一天后域名成效
- 美化
从网上找到的主题clone到theme文件夹下
然后更改config
# Extensions ## Plugins: https://hexo.io/plugins/ ## Themes: https://hexo.io/themes/ theme: matery //主题名字
- 备份博客文件
只针对博客文件所在的第一台电脑中
直接在hexo文件内git init
然后在上传到你新建的一个项目中(最好是私有仓库,因为里面有你的账号信息)
config.yml设置额外添加说明
一般在新电脑中需要添加而外的功能
注意,一般clone下来的config.yml已经有功能,只不过需要npm安装环境
需不需要,先运行博客试看一下,然后再查看有没有设置,最后再考虑要不要安装
以下操作都是在hexo文件在的cmd中执行
修改新建文章、page、draft的自动添加内容
在scaffolds的各个文件里面直接设置就行
修改语言
找到language: 后面一定是选中主题下language文件下的语言语言名字,比如:zh-CN
记得将自己主题设置config及其相关设置文件下的英文对应的中文名添加到主题下language/zh-CN 里面
代码高亮
由于 Hexo 自带的代码高亮主题显示不好看,所以主题中使用到了 hexo-prism-plugin 的 Hexo 插件来做代码高亮,安装命令如下:
npm i -S hexo-prism-plugin
然后,修改 Hexo 根目录下 _config.yml 文件中 highlight.enable 的值为 false,并新增 prism 插件相关的配置,主要配置如下:
highlight: enable: false prism_plugin: mode: ‘preprocess‘ # realtime/preprocess theme: ‘tomorrow‘ line_number: false # default false custom_css:
搜索
本主题中还使用到了 hexo-generator-search 的 Hexo 插件来做内容搜索,安装命令如下:
npm install hexo-generator-search --save
在 Hexo 根目录下的 _config.yml 文件中,新增以下的配置项:
search: path: search.xml field: post
中文链接转拼音(可选的)
如果你的文章名称是中文的,那么 Hexo 默认生成的永久链接也会有中文,这样不利于 SEO,且 gitment 评论对中文链接也不支持。我们可以用 hexo-permalink-pinyin Hexo 插件使在生成文章时生成中文拼音的永久链接。
安装命令如下:
npm i hexo-permalink-pinyin --save
在 Hexo 根目录下的 _config.yml 文件中,新增以下的配置项:
permalink_pinyin: enable: true separator: ‘-‘ # default: ‘-‘
文章字数统计插件(可选的)
如果你想要在文章中显示文章字数、阅读时长信息,可以安装 hexo-wordcount插件。
安装命令如下:
npm i --save hexo-wordcount
然后只需在本主题下的 _config.yml 文件中,激活以下配置项即可:
wordCount: enable: false # 将这个值设置为 true 即可. postWordCount: true min2read: true totalCount: true
添加 RSS 订阅支持(可选的)
本主题中还使用到了 hexo-generator-feed 的 Hexo 插件来做 RSS,安装命令如下:
npm install hexo-generator-feed --save
在 Hexo 根目录下的 _config.yml 文件中,新增以下的配置项:
feed: type: atom path: atom.xml limit: 20 hub: content: content_limit: 140 content_limit_delim: ‘ ‘ order_by: -date
执行 hexo clean && hexo g 重新生成博客文件,然后在 public 文件夹中即可看到 atom.xml 文件,说明你已经安装成功了。
添加goole广告投送
注册登录google Adsense官网
打开网站之后就可以开始注册了(即使你有google账户也要注册!)- 官网点击注册(sign up),进入注册页面
- 在注册页面填写你的信息(网站地址不可以是二级域名)
- 在之后填写你的地址信息
- 地址信息填完毕之后会给你一串代码,类似如下:
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script> (adsbygoogle = window.adsbygoogle || []).push({ google_ad_client: "ca-pub-8955547868703063", enable_page_level_ads: true }); </script>
把这一串代码放在
与之间
博客目录\themes\yilia\layout_partial\head.ejs文件的更新上传
返回官网进行确认检测
审核通过
稍等一天时间,如果没有问题,即可审核通过。
有问题就改问题,然后在申请。添加展示广告
- 在网页上找到“广告” -> “广告单元” -> “创建新的广告单元” -> “展示广告”
- 然后再界面里面先填写一个名字(例如ad_google_1)
- 点击创建
- 将生成的代码添加到
博客目录
\themes\yilia\layout\_partial\article.ejs
中对应适当位置即可,注意别让广告扰乱了页面布局,影响全局美感。
添加代码如下:
可以在文章开头添加: <!--文章头google图片--> <% if ((theme.googlead_type === 2 || (theme.googlead_type === 1 && post.googlead)) && !index){ %> <hr> <strong>??下面这个看起来像广告的东西,其实是只个图片,根本打不开的。不过听说有时候??</strong> <br> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- googlead1 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-8955547868703063" data-ad-slot="3853918361" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <% } %> <!--文章头google图片结束--> 可以在结尾处添加: <!-- 尾google广告 --> <% if ((theme.googlead_type === 2 || (theme.googlead_type === 1 && post.googlead)) && !index){ %> <hr> <strong>??下面这个才是真正的广告哦,如果感觉真的从文章中有带走新东西的话,可以帮我点一下哦??</strong> <br> 这里是google网页生成的代码 <% } %> <!-- 尾google广告 -->
然后还需要在
/theme/yilia/_config.yml
中合适位置添加
#google广告基础设定:0-关闭广告; 1-文章对应的md文件里有googlead: true属性,才有广告; 2-所有文章均有广告 googlead_type: 1
使用教程如上面提示:
0-关闭广告;
1-文章对应的md文件里有googlead: true属性,才有广告;
2-所有文章均有广告添加完毕
在网页中点击“大功告成”
网页上传
hexo clean hexo g hexo d
- 等待一小时左右大约会出现广告