前言

为什么要做个网站呢？

网站搭建

安装Git和Node.js

npm -v验证安装

本地搭建hexo静态博客

在本地电脑任意路径下新建一个文件夹（例如MyBlog）
在该文件夹内空白处右击，运行git bash here，
输入：hexo init（生成hexo模板，可能要翻墙）
运行：hexo s（运行程序，访问本地localhost:4000可以看到博客已经搭建成功，此步可跳过）

将本地hexo静态博客与github仓库相连

注册GitHub，创建仓库
注意创建仓库(对于个人主页的只能保持名字与用户名一致，并放在branch分支下，否则上传网站成功了也是404错误 https://github.com/hexojs/hexo/issues/350)
连接GitHub。
在任意地方右键，Git Bash here可以打开Git命令行，然后输入
1
2
3
git config --global user.name "guohuahu"
git config --global user.email "huguohua188@gmail.com"
ssh-keygen -t rsa -C "huguohua188@gmail.com"
在C:\Users\username.ssh可以找到文件id_rsa.pub，
打开复制其中的密钥粘贴到https://github.com/settings/keys中的new ssh key中，
回到命令行窗口，输入
1
ssh git@github.com
输入yes，看到成功提示!

撰写博客与更新博客

撰写博客
hexo new “我的第一篇文章”，会在source_posts文件夹内生成一个.md文件。
1
hexo new “我的第一篇文章”

更新博客

hexo clean 删除本地静态文件（Public目录），可不执行。
hexo g 生成本地静态文件（Public目录）
hexo s 本地服务器预览（访问本地localhost:4000即可预览）
hexo d 将本地静态文件推送至github（hexo g -d可以组合执行）

绑定域名

域名提供商设置,添加2条A记录：

$	@—>192.30.252.154
$	@—>192.30.252.153
$	添加一条CNAME记录：
$	CNAME—>yourname.github.io

在blog\source目录下新建CNAME文件，写入域名，如：thief.one

基本设置

安装Next主题

下载主题

1	git clone https://github.com/iissnan/hexo-theme-next.git（主题的地址）

配置文件与主题配置文件

hexo网站配置文件：blog_config.yml
next主题配置文件：Blog\themes\next_config.yml

菜单与图标

分别是标题名字: /位置，||, 图标名称

menu_icons:
  enable: true
  home: home
  about: user
  categories: th
  schedule: calendar

标题名字对应主题中的语言配置zh-CN.yml可现实对应中文

menu:
  home: 首页
  archives: 归档
  categories: 分类
  tags: 标签
  about: 关于

图标名称是根据https://fontawesome.com/icons网站中的图标名称在线索引的

添加底部版权信息

属于footer底栏

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

  # Icon between year and copyright info.
  icon:
    # Icon name in fontawesome, 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 main config will be used.
  copyright:

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

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

  # Beian icp information for Chinese users. In China, every legal website should have a beian icp in website footer.
  # http://www.beian.miit.gov.cn
  beian:
    enable: false
    icp:

  # Any custom text can be defined here.
  #custom_text: Hosted by <a href="https://pages.coding.me" class="theme-link" rel="noopener" target="_blank">Coding Pages</a>

进阶设置

添加图片

把图片放入Blog\source\images下，然后使用/images/xxx.png去访问，

1	![title](/images/xxx.png)

添加音乐

1	{% meting "366024" "netease" "song" "mini" "theme:#ad7a86"%}

彩色标签云

取消显示powered by
在主题配置文件中设置false即可

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

增加访问人数
在主题配置文件里关闭busuanzi，然后在主题的footer.swig中添加

<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<span id="busuanzi_container_site_pv"><br>总访问量<span id="busuanzi_value_site_pv"></span>次</span>
<span class="post-meta-divider">|</span>
<span id="busuanzi_container_site_uv">总访客数<span id="busuanzi_value_site_uv"</span>人</span>

SSL证书与https安全访问

https://coding.net/help/faq/pages/coding-pages-faq.html
https://www.jianshu.com/p/504b178d48e9

bug 系列

图片引用失效了

只能换个方式引用

1	<div style="width: 700px; aligh: left; margin: auto"> <img src="/images/表格转Markdown.png"></div>

头像不显示

要放在resource下面的images中才能生效

参考

[1]. https://me.idealli.com/post/e8d13fc.html
[2]. http://yearito.cn/posts/hexo-writing-skills.html#note标签
[3]. http://theme-next.iissnan.com

GitHub+Hexo(1)-如何搭建和优化一个网站

前言