本站建站指导

本站建站指导

安装

  1. 注册github账号,并新建一个github仓库(Repositories)
  2. 下载node.js。
    https://nodejs.org/en/download/
  3. 安装git。
    https://git-for-windows.github.io/
  4. 鼠标右键安装node.js的地方,进入nodemudule文件夹,选择Git Bash,使用以下命令安装hexo
    1. npm install hexo-cli -g
    2. npm install hexo-deployer-git –save
  5. 创建放置博客文件的文件夹:hexo文件夹,如E:\hexo。最好不在中文目录下。
    注意:以后进行hexo操作都要进入到此文件夹中;对于git操作,若无特殊说明,则也进入到此文件夹中(在此文件夹中启动Git Bash)
  6. 进入E:\hexo文件夹,鼠标右键选择“Git Bash”,执行以下命令,初始化hexo,这时候会在该文件夹中创建网站所需要的文件
    1. hexo init
    2. npm install
    3. hexo g
      此时已经可以在本地访问。在Git Bash中输入命令:
      hexo s
      访问127.0.0.1:4000或localhost:4000即可看到网页预览。
  7. 布置到github上。
    1. 启动Git Bash,输入以下命令:
      1. git config --global user.name "your name"
      2. git config --global user.email your_email@youremail.com
        其中每条命令的最后一个参数修改为自己的数据
    2. 输入命令:ssh-keygen -t rsa -C ringoer@qq.com
      此时会生成ssh密钥。命令中邮件地址替换为自己的。
    3. 输入命令:cat ~/.ssh/id_rsa.pub
      此时会在控制台显示一串密钥,复制下来。
    4. 打开github,打开settings,选择SSH and GPG keys,选择New SSH key。
      title随便写,key的文本则填写刚才复制出来的密钥,然后add key。
    5. 输入命令:ssh -T git@github.com
      上述命令不可修改
    6. 打开hexo文件夹中的_config.yml,修改文档末尾的deploy,示例如下:
      修改deploy
      其中蓝色部分应替换成自己的链接。链接来源参考自己github仓库的链接(如图):
      github仓库链接示例
      注意:hexo的配置文件中任何:后面都是带一个空格的。
  8. 绑定自己的域名
    1. 在/hexo/source文件夹中新建一个CNAME文件,然后里面添加自己的网站域名。
      可以在github的setting中查看是否发布成功。
    2. 到自己的域名解析中添加CNAME值,解析到username.github.io.(注意最后面有点)

个性化

  1. 下载主题。此处我选用next主题,Pisces主题风格(默认为Muse)。
    修改/themes/next下的配置文件中的schemes字段。
    配置主题-1
    取消需要的主题风格前的井字号,然后在之前的主题风格前加入井字号即可。
    之后配置网站信息,如图。
    配置主题-2
  2. 底部信息。修改/themes/next下的配置文件中的footer字段。
    配置footer
  3. 文章缩略。修改/themes/next下的配置文件中的auto_excerpt字段。
    文章缩略
    enable改成true即可。
    也可以手动在每篇文章中添加<!--more-->字段,在该字段后的部分会被隐藏。
  4. 修改导航栏。修改/themes/next下的配置文件中的menu字段。
    修改导航栏
    想要什么选项,就去掉其之前的井字号,或自己新加入一个。
    ||后面是该项所用的图标
  5. 菜单项图标。在 http://www.fontawesome.com.cn/icons-ui/ 中选择。取用时要去掉前缀fa-。修改/themes/next下的配置文件中的menu字段。
  6. 取消页面动画。修改/themes/next下的配置文件中的motion字段。
    取消页面动画
    enable: false即可
  7. 设置头像。修改/themes/next下的配置文件中的avatar字段。
    设置头像
    须确认有/source/images文件夹(如没有则应新建),后在其中添加图片,如图写入路径即可。
    该路径也可以是来自网络的图片路径。
  8. 设置社交媒体。修改/themes/next下的配置文件中的social字段。
    社交媒体
    icons_only默认为false,会显示各个图标的名字。若为true则仅有图标。
  9. 顶部加载进度条。修改/themes/next下的配置文件中的pace字段。
    顶部加载进度条
  10. 文章结尾标识。分为以下三个步骤。

    1. 打开\themes\next\layout_macro文件夹,新建文件passage-end-tag.swig,向其中写入以下片段。

      1
      2
      3
      4
      5
      		<div>
      {% if not is_index %}
      <div style="text-align:center;color: #ccc;font-size:14px;">-------------It's the end.<i class="fa fa-life-ring"></i>Thanks for your read.-------------</div>
      {% endif %}
      </div>
    2. 打开\themes\next\layout_macro\post.swig文件,进行如图操作。
      文章结尾标识
      插入的文本如下:

      1
      2
      3
      4
      5
      <div>
      {% if not is_index %}
      {% include 'passage-end-tag.swig' %}
      {% endif %}
      </div>
    3. 在/themes/next下的配置文件中加入以下字段。

      1
      2
      3
      	# 文章末尾添加“本文结束”标记
      passage_end_tag:
      enabled: true
  11. 添加外链网易云音乐。分为以下两个步骤。

    1. 访问网页版网易云,找到合适的歌曲/歌单,生成分享外链,复制html代码。
    2. 找到合适的位置插入这段代码。本博客插入在\source\about\index.md中图片的后面(如图)。
      外链网易云音乐
  12. 本地可视化编辑文章。启动git bash,执行以下命令。
    npm i hexo-admin –save
    之后执行hexo s时,访问 localhost:4000/admin 即可进入文章后台。
    此处文章编辑使用markdown。
  13. 文章置顶。把需要置顶的文章的发布时间改到200年之后(233333333)。
  14. 修改菜单中的选项名称。打开\themes\next\language\zh-Hans.yml,找到menu字段,进行如图配置。
    导航栏项目改名

迁移

  1. 拷贝原有hexo文件夹至新电脑
  2. 重新配置git和node.js
  3. 安装hexo

    1
    npm install hexo-cli -g
  4. 进入hexo文件夹,执行以下指令

    1
    2
    3
    4
    npm install
    npm install hexo-deployer-git --save
    npm install hexo-generator-feed --save
    npm install hexo-generator-sitemap --save
  5. 重新配置SSH密钥

  6. 正常使用

参考链接

https://blog.csdn.net/qq_27754983/article/details/76143478
https://www.jianshu.com/p/21c94eb7bcd1
https://www.jianshu.com/p/393d067dba8d
https://www.jianshu.com/p/9f0e90cc32c2
https://blog.csdn.net/eternity1118_/article/details/71194395?ref=myread

--It's the end.Thanks for your read.--