搭建博客步骤

发表于 | 分类于 |
字数统计: 2.1k 字 | 阅读时长 ≈ 8 min

写在前面，这其实不是我第一次搭博客，之前尝试过一次但是兴致冲冲地找了很多教程做到后来发现hexo装的就有些问题，并不是网上的教程不详细，但是东看西看容易出错，这里重头再来一遍，把之前的坑都补上

安装Nexo

前提：安装好了node.js和git

1)新建一个空的文件夹，用于存放你的项目，在其中打开Git Bash

2)依次执行以下命令：
​
​ npm install hexo-cli -g
​ hexo init blog
​ cd blog
​ npm install
​ hexo server

其中第一步可能会等的久一点，耐心等待。

3)浏览器打开4000端口，可以在本地看到原始的hexo博客，ctrl+c关闭，每次想预览可以再输入 hexo server (hexo s)

如果4000端口占用，可用hexo server -p 其他端口号，也可以找方法把4000端口的服务关掉

这一步有问题一定要解决，hexo运行正常才是搭一个githubio的前提

部署到GitHub Pages

1) 在GitHub新建一个仓库，Repository name必须得是 账户名.github.io

这时你已经可以访问 https://xxx.github.io/了

2) 回到你的blog文件夹下，执行：
​
​ $ git config –global user.name “yourname”
​ $ git config –global user.name “youremail@xx.com“

3) 找到_config.yml，在最后找到下面的内容并修改：
​
​ deploy:
​ type: git
​ repository: https://github.com/WYuyin/WYuyin.github.io.git
​ branch: master

4) 执行命令 hexo d -g 就可完成部署

等待一会会让你输入GitHub用户名和密码，再访问http://xxx.github.io就可以看到你的主页

这里 搭建和部署是两个命令，第一次部署需要用hexo g，安装完插件后每次要提交只需hexo d即可，如果出错可以hexo clean + hexo d -g

使用NexT

1) 安装

git clone https://github.com/iissnan/hexo-theme-next themes/next

2) 启用，修改_config.yml:
​
​ theme: next

3) 开启服务后再访问你的主页就可以看到NexT了

$ hexo clean && hexo g && hexo d -g
$ hexo g && hexo s   #如需本地预览，执行这一条

提交了后并不是立马刷新的，稍微等十几秒钟才能更新

优化

这里根据个人喜好装饰博客，我之前其实已经做完了这些工作，一些配置就直接复制的之前的配置文件，这里区分两个配置文件，一个是安装hexo时生成的，还有一个是next主题中的，位置blog\themes\next_config.yml，修改样式主要在这两个中，另外如果想修改NexT的css样式，直接添加进\blog\themes\next\source\css_custom\custom.styl
​
样式的修改参考了大佬的博客

下面就一些我遇到的坑记录解决方法

字数与阅读时长

链接：Hexo添加字数统计、阅读时长

代码块高亮颜色

在配置文件中找到：

highlight_theme: normal，注释显示有五种显示主题可用，分别是：

  • normal
  • night
  • night eighties
  • night blue
  • night bright

创建分类与标签

链接：hexo设置 关于 标签 分类 归档

博客icon更替

1) 找一个尽量长宽比相等的小图标，什么图片格式都可以

2) 百度，在线将你的图片转成ico格式

3) 将图标放在 blog\themes\next\source\images 文件夹下

4) 修改 blog\themes\next_config.yml

在博客中添加图片

链接：hexo生成博文插入图片

之前我用的是一种比较笨的方法，每次上传到github然后再添加打开，但是github加载的速度大家也知道，相当的慢，经常出不来，于是找到了这个hexo的插件：npm install hexo-asset-image --save

当生成一个新的博客时会多出一个同名的文件夹，将图片放进去然后用<img src="xxxx/图片名.png">就可以实现了，当然，如果你想贴的是网上现成的图，直接写网址就ok

首页不显示全文

在配置文件中找到 auto_excerpt ，并修改：

auto_excerpt:
  enable: true    #这里修改为true
  length: 150

评论与其他

上面收集的是一些我开博客遇到的问题，另外有一些样式上的问题比较简单。评论我用了来必力，网上有很多其他的第三方评论平台都已经停了，所以只能暂时用这个，还算方便快捷。

这里就告一段落啦，如果有问题欢迎留言讨论，不过我也还是一个小菜鸡呀

10.18日更新

置顶

$ npm uninstall hexo-generator-index --save
$ npm install hexo-generator-index-pin-top --save

然后在文章顶部+top: true就可以啦。另外还找到一个方法是改js，设置top的优先级，还未试过，这边给出链接

菜单点击出现的小图案

总的来说看上去还是一个标标准准的Next风格，其实想变得与众不同一些我在一些小细节上还是做了很多改动的！比如这个点击菜单出现的喵喵图案，改起来其实并不难。
第一步，找一个背景透明，缩小看也不失真的图片，我是用ps调整的图片大小，【用画图工具的话好像会留白】，调整大小为30px*30px
第二步，将图片放在blog\themes\next\source\images目录下，和改icon的目录一致
第三步，修改\blog\themes\next\source\css_custom\custom.styl文件，添加：

//菜单
.menu-item-active a:after {
    width: 30px;
    height: 30px;
    background: url("../images/miao2.png");
    margin-top: -12px;//调整好位置
}

第四步，预览并调试图片的位置，上面的margintop是我调整后觉得合适的边距，主题不一样可能位置有偏差，用浏览器的开发者工具调整到一个最佳的角度就ok，效果：

加速博客浏览速度

找到一个好的博客真的是很难得，河乐不为的CSDN，重点！重点这里的操作完全和文中的一样，且没有遇到坑，惊喜

  • 注册Coding.net账号：
    打开Coding.net官网，注册一个个人账号
  • 新建项目
    注意项目名与注册用的账户名一致，这里我用的是WYuyin：
  • 添加公钥
    上面设置完毕之后点击创建项目，然后点击设置->部署公钥->新建部署公钥，之前部署到Github上的时候，本地目录 C\User(中文为用户)(电脑用户名).ssh 目录下会有 github.rsa.pub 公钥文件，打开然后复制里面的内容，直接贴在这里的公钥框中：

    记得要勾选 授予推送权限 ，否则在后面运行hexo d时会提示错误：
    Coding.net Tips : [Deploy key is not allowed to push!]
    fatal: Could not read from remote repository.
    原因就是没有推送权限。

打开Git命令窗口，输入以下指令：

ssh -T git@git.coding.NET

假如出现以下输出结果，表示公钥绑定成功：

The authenticity of host 'git.coding.net (118.25.166.124)' can't be established.
RSA key fingerprint is SHA256:jok3FH7q5LJ6qvE7iPNehBgXRw51ErE77S0Dn+Vg/Ik.
Are you sure you want to continue connecting (yes/no)? y
Please type 'yes' or 'no': yes
Warning: Permanently added 'git.coding.net,118.25.166.124' (RSA) to the list of known hosts.
Coding 提示: Hello WYuyin, You've connected to Coding.net via SSH. This is a deploy key.
WYuyin，你好，你已经通过 SSH 协议认证 Coding.net 服务，这是一个部署公钥

  • 修改hexo配置
    打开hexo本地的配置文件 _config.yml，修改 deploy 的配置内容，这里设置了运行hexo d之后部署的目的地址，原本只有Github地址，现在添加多Coding.net的地址，其中WYuyin是注册该平台的 用户名：

    deploy:
  type: git
  repository: 
github: https://github.com/WYuyin/WYuyin.github.io.git
coding: git@git.coding.net:WYuyin/WYuyin.git,master
  branch: master

  • 正式部署到Coding.net：
    打开命令行窗口，定位到当前hexo项目的根目录下，运行以下指令将本地博客部署到Github和Coding.net上：

    hexo g

  hexo d

  • 设置Coding Page：

    设置成功后是这个样子

然后访问http://wyuyin.coding.me/就可以啦，无需等待立马就可以见到效果,访问的速度比之前快了一倍，另外我也对next的js做了一些调整，这里参考Soul_wwb的CSDN