Win10+Hexo+GitHub搭建个人博客

基本环境

1、Node.js下载和安装:https://nodejs.org/en/
Win10+Hexo+GitHub搭建个人博客_第1张图片
2、Git下载和安装:https://git-scm.com/download/win
这个下载速度太慢,或者无法下载,这时候可以选择腾讯软件中心下载,https://pc.qq.com/detail/13/detail_22693.html
3、GitHub注册和创建仓库:https://github.com/
在GitHub账号创建成功之后,需要创建一个仓库来管理自己的文件。
(1) 点击个人主页右上角“+”里面的New repository
Win10+Hexo+GitHub搭建个人博客_第2张图片
(2) 输入Repository name:用户名.github.io,注意:用户名一定要和注册的用户名一样。
Win10+Hexo+GitHub搭建个人博客_第3张图片
4、配置SSH免密登录
(1)在桌面点击鼠标右键,选择“Git Bash Here”,打开Git Bash终端。
(2)设置user name和email:

git config --global user.name "GitHub用户名"
git config --global user.email "GitHub注册邮箱"

(3)生成SSH密钥

ssh-keygen -t rsa -C "GitHub注册邮箱"

(4)输入命令后直接回车即可,在C盘的用户目录下会生成.ssh文件夹(我电脑上的目录为C:\Users\yiming.ssh),里面有私钥id_rsa和公钥id_rsa_pub。
(5)在GitHub上添加SSH keys。具体步骤是点击GitHub头像下的Settings->SSH and GPG keys->New SSH key,将本地的公钥id_rsa_pub内容复制粘贴到其中即可。
Win10+Hexo+GitHub搭建个人博客_第4张图片
Win10+Hexo+GitHub搭建个人博客_第5张图片
(6)验证SSH免密是否成功

ssh -T [email protected]

安装cnmp和hexo

1、在任意位置新建文件夹hexo,命令行切换至此文件夹,并运行如下命令:

# 从淘宝镜像下载安装cnmp,安装后在命令行中用cnmp替换nmp
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 为了提高下载速度,修改npm的资源镜像链接为淘宝网
npm config set registry http://registry.npm.taobao.org
# 以下是安装hexo并保存相应文件
cnpm install hexo-cli -g
cnpm install hexo --save
# 初始化博客文件夹blog
hexo init blog
# 把目录切换到blog
cd blog
# 安装必要插件
cnpm install
# 生成资源
hexo g
# 开启本地浏览服务
hexo s

如果成功,将会出现如下结果:
Win10+Hexo+GitHub搭建个人博客_第6张图片
执行以上命令之后,hexo就会在public文件夹生成相关html文件,这些文件将来都是要提交到github去的。

hexo s是开启本地预览服务,打开浏览器访问 http://localhost:4000 即可看到内容。

注意:不要关掉以上服务窗口,否则无法预览

第一次初始化的时候hexo已经帮我们写了一篇名为 Hello World 的文章,默认的主题比较丑,打开时就是这个样子:
Win10+Hexo+GitHub搭建个人博客_第7张图片

更换博客模版

1、hexo主题下载网址:https://hexo.io/themes/
2、安装步骤
(1)下载相应主题:

git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

执行后在blog文件夹的themes中可以找到有yilia的文件。
(2)找到_config.yml文件,修改里面的配置:

  • 将theme 修改为theme: yilia,需要注意的是冒号后有空格
  • 将deploy修改为:
    type: git
    repository: [email protected]:fuusy/fuusy.github.io.git
    branch: master
    (3)最后运行如下命令重新生成、重启服务:
hexo clean && hexo generate && hexo server

刷新主页:http://localhost:4000/,即可看到新主题生效。

美化NexT7.1.1模版

开启打赏功能

打开新主题配置 _config.yml 文件,搜索关键词 reward_settings: 里的 enable: 改为 true ,并在blog\themes\next\source\images放入相应的二维码图片即可。

设置每篇博文部分显示

无需修改配置文件,只需在博文的相应位置加上如下标记:


SEO 设置

# Disable Baidu transformation on mobile devices.
disable_baidu_transformation: true //禁用移动设备上的百度转换,建议 true

# Set a canonical link tag in your hexo, you could use it for your SEO of blog.
# See: https://support.google.com/webmasters/answer/139066
# Remember to set up your URL in Hexo `_config.yml` (e.g. url: http://yourdomain.com)
canonical: true //规范的链接标签,建议 true

# Change headers hierarchy on site-subtitle (will be main site description) and on all post / page titles for better SEO-optimization.
# 更改网站副标题(将是主要网站描述)和所有文章/页面标题的标题层次结构,以便更好地优化SEO。
seo: true //建议 true

# If true, will add site-subtitle to index page.
# Remember to set up your site-subtitle in Hexo `_config.yml` (e.g. subtitle: Subtitle)
index_with_subtitle: true //带副标题的索引,开启后会在标签标题后面自动加上网站名称,建议 true

# Automatically add external URL with Base64 encrypt & decrypt.
exturl: false

# Google Webmaster tools verification.
# See: https://www.google.com/webmasters ←参考
google_site_verification:  //谷歌网站管理员工具验证

# Bing Webmaster tools verification.
# See: https://www.bing.com/webmaster ←参考
bing_site_verification: //必应Bing网站管理员工具验证

# Yandex Webmaster tools verification. 
# See: https://webmaster.yandex.ru ←参考
yandex_site_verification: //Yandex网站管理员工具验证

# Baidu Webmaster tools verification.
# See: https://ziyuan.baidu.com/site ←参考
baidu_site_verification: //百度站长工具验证

# Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO.
#启用百度推送,这样博客会自动把网址推到百度,这对SEO很有帮助。
baidu_push: true //建议 true

博主头像圆形并旋转

搜索avatar,进行如下修改。

# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: /images/avatar.gif #去掉#
  # If true, the avatar will be dispalyed in circle.
  rounded: true #改为true
  # If true, the avatar will be rotated with the cursor.
  rotated: true #改为true

背景开启帆布窝或帆布色带

帆布窝:

canvas_nest:
  enable: false
  onmobile: true # Display on mobile or not
  color: "0,0,255" # RGB values, use `,` to separate
  opacity: 0.5 # The opacity of line: 0~1
  zIndex: -1 # z-index property of the background
  count: 99 # The number of lines

帆布色带:

canvas_ribbon:
  enable: false
  size: 300 # The width of the ribbon
  alpha: 0.6 # The transparency of the ribbon
  zIndex: -1 # The display level of the ribbon

在footer中可以设置博客创建时间、版权图标、版权文字、备案文字、文章底部版等

footer:
  # Specify the date when the site was setup. If not defined, current year will be used.
  since: 2019

  # Icon between year and copyright info.
  icon:
    # Icon name in Font Awesome. See: https://fontawesome.com/v4.7.0/icons/
    # `heart` is recommended with animation in red (#ff0000).
    name: user
    # If you want to animate the icon, set it to true.
    animated: false
    # Change the color of icon, using Hex Code.
    color: "#808080"

  # If not defined, `author` from Hexo `_config.yml` will be used.
  copyright: 版权所有,伪造比就

  powered:
    # Hexo link (Powered by Hexo).
    enable: false
    # Version info of Hexo after Hexo link (vX.X.X).
    version: false

  theme:
    # Theme & scheme info link (Theme - NexT.scheme).
    enable: false
    # Version info of NexT after scheme info (vX.X.X).
    version: false

  # Beian ICP and gongan information for Chinese users. See: http://www.beian.miit.gov.cn, http://www.beian.gov.cn
  beian:
    enable: true
    icp: 已备案
    # The digit in the num of gongan beian.
    gongan_id:
    # The full num of gongan beian.
    gongan_num:
    # The icon for gongan beian. See: http://www.beian.gov.cn/portal/download
    gongan_icon_url:

# Creative Commons 4.0 International License.
# See: https://creativecommons.org/share-your-work/licensing-types-examples
# Available values of license: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
# You can set a language value if you prefer a translated version of CC license, e.g. deed.zh
# CC licenses are available in 39 languages, you can find the specific and correct abbreviation you need on https://creativecommons.org
creative_commons: #文章底部版
  license: by-nc-sa
  sidebar: true
  post: true
  language:

自动添加分类,标签

打开blog\scaffolds文件夹下的post.md,添加categories:,打开 categories 文件夹下的 index.md ,在最下面一行添加type: categories,把文章归入分类只需在文章的顶部标题下方添加categories字段,即可自动创建分类名并加入对应的分类中。
标签的添加过程类似。

修正图片显示问题

经过上面的配置后,发现上传的博客文章里面的本地图片居然显示不来(没有同步上传)。解决方案:
1 把主页配置文件_config.yml 里的post_asset_folder:这个选项设置为true
2 在你的hexo目录下执行
npm install hexo-asset-image --save

3 等待一小段时间后,再运行hexo n "xxxx"来生成md博文时,/source/_posts文件夹内除了xxxx.md文件还有一个同名的文件夹
4 最后在xxxx.md中想引入图片时,先把图片复制到xxxx这个文件夹中,然后只需要在xxxx.md中按照markdown的格式引入图片:

![]( xxxx/picturename)

注意: xxxx是这个md文件的名字,也是同名文件夹的名字。只需要有文件夹名字即可,不需要有什么绝对路径。你想引入的图片就只需要放入xxxx这个文件夹内就好了,很像引用相对路径。
5.hexo s,运行本地服务器,打开http://localhost:4000/,可实时查看修改情况。

给hexo静态博客添加RSS

  1. 安装插件cnpm install hexo-generator-feed --save
  2. 启用插件,在博客工程文件根目录下_config.yml文件中添加如下内容
# Extensions
plugins:
    hexo-generator-feed
#Feed Atom
feed:
    type: atom
    path: atom.xml
    limit: 20

3.修改主题配置文件

social_links:
            Github:
                icon: fab fa-github
                url: 'https://github.com/pushiji'
            Weibo:
                icon: fab fa-weibo
                url: 'https://weibo.com/ushiji'
            RSS:
                icon: fas fa-rss
                url: /atom.xml

4.生成RSS

$ hexo g
(node:6520) [DEP0061] DeprecationWarning: fs.SyncWriteStream is depre                                                                                                                           cated.
INFO  Start processing
INFO  Files loaded in 6.33 s
INFO  Generated: atom.xml <----------成功生成atom.xml文件
INFO  Generated: sitemap.xml
INFO  Generated: baidusitemap.xml
INFO  Generated: about/index.html
......
......
......

如何按上述方法无法实现的的话,可以以系统管理员身份运行cmd,运行相应的指令即可。

将博客部署到GitHub

安装插件

cnpm install hexo-deployer-git --save

设置站点配置文件

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/pushiji/pushiji.github.io
  branch: master

执行上传指令

hexo clean && hexo generate && hexo deploy

在上传过程中如果出现要求输入用户名和密码,就把自己真实的用户名和密码输入会车即可。上传部署成功后原则上立马可以访问(https://pushiji.github.io/)。

绑定私有域名

第一步、从腾讯云或阿里云等域名提供商申请注册一个域名。

第二步、设置自己的github page。

  • 在github.io仓库中创建文件CNAME.md,文件内容为第一步中申请的域名,如pushiji.top由于重新部署博客的时候,会删除github仓库里的原内容,所以,可以在博客站点的source目录中创建CNAME.md文件,这样每次部署博客时一起同步上去;
  • 点击github.io仓库的 settings按钮,往下滚动,在Costom domain中填入第一步中申请的域名,如pushiji.top

第三步、 域名解析,以阿里云为例,如下图填写即可绑定成功。 Win10+Hexo+GitHub搭建个人博客_第8张图片

你可能感兴趣的:(GitHub,github)