前段时间小牛为了给网站更换评论系统,把网站弄崩了(可太难了~~),准备重新走一遍,顺便把之前写的文章合在一起,并修正。(本文以后随缘更新)


文章目录

    • 一些必备准备工作
      • 拥有github 账户
      • 下载nodejs
      • 下载git
    • 安装使用Hexo
    • ~~Netlify和Github持续部署Hexo博客,并实现版本控制~~
    • 深度优化网站
      • 下载Next主题社区版
      • 修改Next为中文
      • 网站一些基本信息
      • 新建标签及分类标签
      • 更换主题的样式
      • 设置头像
      • 增加知乎豆瓣等自定义图标支持
      • 编写博客
      • 部署至github
      • 开启赞赏功能
      • 开启订阅公众号
      • 去掉底部-原力驱动
      • 设置阅读全文
      • 修改文章底部带#的便签
      • 修改网站图标
      • 浏览页面显示当前浏览进度
      • 增加搜索功能
  • 安装插件,用于生成博客索引数据(在博客根目录下执行下列命令):
    • 增加不蒜子统计功能
    • 设置license的样式
    • ~~添加聊天功能~~
    • 文章置顶
    • ~~添加3d地球~~
    • 域名绑定
    • 自定义hexo创建文章的模板
    • 增加鼠标点击特效
    • 自定义网页样式
    • 添加Google广告
    • 添加 Google Adsense ads.txt
    • 添加备案信息

一些必备准备工作

拥有github 账户

如果没有的话,首先去github官网去注册一个账户(有的话,相信你懂这个网站,这部分你可以跳过)

按部就班地填写信息即可,用户名别乱起,以后改起来麻烦,后面还要拿用户名当域名,当然你们开心就好

接着创建Repository

登陆GitHub,点击右上角的 +号,选择New repository

现在新建一个仓库 blog(如果你没有买域名,那Repository的名字格式是username.github.io,比如xiaoniuhululu.github.io )。
其余先不弄,点击Create repository

下载git bash这个软件,装到win10电脑中,一路默认安装即可

在电脑中,创建一个目录 来保存这个项目

期间可能会问你 邮箱地址和用户名,密码 ,按照上面的提示执行命令,把相关信息换成自己的即可。

下载nodejs

去官网去下,同时配置一下,可以看我之前的一篇文章

下载git

可以参考小牛以前写过一篇文章关于git的安装和使用,由于本文会很长,为了详略得当,这里就略过了 = =

安装使用Hexo

node 环境配置好后,直接执行

cnpm install -g hexo

cnpm 是因为我配置了阿里云的镜像

接着执行一下命令确认hexo安装完好。

hexo -v

该命令会显示hexo的版本及依赖的包

我们先尝试启动这个网站,没错就这么简单

我们在D:\GitBlog这个目录下(这个目录自己选即可),保证这个目录为空。然后初始化我们的网站,输入hexo init初始化文件夹,接着输入cnpm install安装必备的组件。

确保git部署,再执行一个命令

cnpm install hexo-deployer-git --save

输入hexo g生成静态网页,然后输入hexo s打开本地服务器,然后浏览器打开http://localhost:4000/,就可以看到我们的博客啦,效果如下:

这里贴一下常用的命令:

hexo g    //生成
hexo s    //启动服务预览
hexo d    //部署hexo server //Hexo会监视文件变动并自动更新,无须重启服务器
hexo server -s //静态模式
hexo server -p 5000 //更改端口
hexo server -i 192.168.20.20 //自定义 IP
hexo clean //清除缓存

到官网的主题进行更换:hexo themes,找自己喜欢的
这块后面文章再讲,先跳过

Netlify和Github持续部署Hexo博客,并实现版本控制

2021-4-11 该方法弃用,国内太卡,根本访问不了,已更换成腾讯云服务器

简单解释一下,小牛之前是用github page来托管网站,但感觉速度太慢,发现Netlify还不错,测试了一下,还行,就转移过去了

Netlify 是一个静态网站自动化部署系统,可快速将静态网站直接构建部署,不需要你提供静态资源服务器。Netlify 基于 JAMstack 架构,即客户端 JavaScript、可重用 API 和预构建 Markup,这是一种现代化、未来化的构建网站的方法,可以提供更好的性能(全球 CDN )、安全性(HTTPS)和更好的开发体验(持续部署及Git集成)。且 Netlify 提供的功能和服务相比 GitHub Pages 功能更为强大——绑定域名、页面重定向、静态资源文件压缩、免费的 HTTPS 等等

优点:

Simply Push to Deploy

支持热部署,只需要将代码 push 到 Git 远程仓库即可自动构建及更新。

Free automatic HTTPS

支持自定义域名,提供免费 HTTPS ,可上传域名证书。

Never have to leave Terminal

可在终端中操作 Netlify。

由于我们准备使用 使用Netlify和Github持续部署Hexo博客 ,这样我们的博客源码会被其他人看到,里面可能有一些私密密码,所以为了安全起见,决定将该仓库设为私有化。(我这里新建的仓库名为blog,你们可以自定义)(如果是小牛之前仅仅普通的将hexo 部署到github pages ,那可以github仓库可以公开,因为hexo 只会默认推送 /public目录到github仓库了,源码不会推送上去,所以这个可以放心大胆设为公开化)

选择Private,这样别人就无法搜索/查看你的博客分支了,同时我们不要勾选和添加任何README以及gitignore文件,直接选择“Create repository“即可完成仓库的创建。

复制你刚刚新建的仓库的地址:

`git@github.com:xiaoniuhululu/blog.git`

回到项目根目录,我们将本地项目和新建的repository通过git联系起来,在当前本地目录打开git bash执行下面:

  git initgit remote add origin git@github.com:xiaoniuhululu/blog.git//推送git至仓库git add ./git commit -m 'init blog'git push --set-upstream origin master

编辑配置文件:用vscode工具 打开 本地博客目录下的_config.ymlL:

把刚刚拷贝的仓库的地址粘贴到repository

deploy:type: git #部署方式repository: git@github.com:xiaoniuhululu/blog.git #github仓库地址branch: run-page #部署分支 注意这个分支,照做,后面会讲

修改完配置文件后,执行

hexo clean //清理静态文件
hexo g //生成静态文件
hexo d //部署

可以看到github的仓库已经变了,且多了一个分支

这样以后:

master 通过git命令 提交,管理博客源码

use-page 通过hexo命令 提交,更新博客页面

接着 托管到Netlify:

我们先到Netlify官网注册一下账号,选择GitHub登录

然后新建项目:

选择GitHub来源:

选择我们在github的项目:

进入一步进行配置:(把后面2个框,清空即可)

等一会,Netlify会自动帮我们生成一个网站

更改网址别名,红框是Netlify 为我们提供的域名网站(后面我会用买的域名替换)

访问这个网站,就能跳转到我们的网站

配置自定义域名的话,首先你得去买一个域名,然后再Netlify设置中,找到domain,然后去域名提供商 去改dns配置即可

这样以后:

master 通过git命令 提交,管理博客源码

use-page 通过hexo命令 提交,更新博客页面

以后换电脑啥的都不怕了,直接把源码拉下来配置。如果写错了,还可以版本回退是不是很舒服。

2021 Hexo+Next7最全搭建个人网站(合集)相关推荐

  1. 免费好用的软件资源网站合集

    ​ 当我们需要找一些软件资源的时候,往往搜索出来的都是一些垃圾的下载站,引导不太了解的同学经常下载安装一些无用的流氓软件.收藏几个免费好用的免费软件资源下载网站可以方便大家在需要的时候直接下载安装节省 ...

  2. 国内外日常上网必备,实用趣味网站合集

    平时上网收集的实用,趣味的100个网站合集,赶紧收藏吧!!! 1.经典的"搜狗输入法" http://pinyin.sogou.com/ 2.免费发短信的站点[2015年还可以使用 ...

  3. 网站合集(我收藏的网址)

    文章目录 网站合集 Study Explore AI Code Fun Tool Idea Blog Work Shopping Other 电子书 网站合集 Study Java 全栈知识体系 Ex ...

  4. 培训机构最不想知道的8个免费自学网站合集,赶紧用起来不要留在收藏夹里落灰了!

    目录 1.国家高等教育智慧教育平台 2 国家职业教育智慧平台 3.国家中小学智慧教育平台 4.中国大学Mooc网 5.网易公开课 6.好大学在线 7.壹课堂 8.大学资源网 这可能是培训机构最不想让你 ...

  5. 630本经典绘本世界中英文PDF+音视频,呕心推荐史上最全电子版绘本合集

    儿童文学作家格雷厄姆·格林说:"只有童年读的书,才会对人生产生深刻的影响." 因为对2个孩子的热爱,想让他们从小能养成阅读的好习惯,而开始关注绘本.工作之余,翻阅了大量中英文经典绘 ...

  6. 设计师必备的8个字体网站与36个设计灵感网站合集

    先为大家介绍下这8个设计师必备的字体网站,大家在使用的时候,可以根据自己的需求来选择,也可以汇总下,基本免费的字体也都能满足我们的日常设计需求了. 设计师必备的8个字体网站 ●iFonts.网站地址: ...

  7. 【合集】Jerry Wang 2018~2021 四年期间的 SAP 技术文章合集

    这是 Jerry 2021 年的第 75 篇文章,也是汪子熙公众号总共第 352 篇原创文章. 大家好,我是 Jerry Wang,从 2007 年起在 SAP 成都研究院工作至今.我是一名全栈开发工 ...

  8. 从入门到进阶,史上最全Python精华文章合集

    我将这些文章分为 10 类--顺便一提,这也恰好反映出 Python 的多用途.多目标的性质. 这些类别如下: Python 常规编程 Python 性能优化 Python 开发环境及 DevOps ...

  9. 很合理,但是有病的奇怪网站合集

    这年头有很多稀奇古怪的软件,网站,无聊的时候可以打发时间,或者分享给朋友乐呵一下 俗话说,存在即合理,所以说它们合理,但是又没啥用,所以说有病 今天就来盘点一波 在线发音转换器 地址:https:// ...

  10. 精选:全球51家最具特色超实用网站合集

    博主花费3天时间精心搜罗的51家精彩特色网站,每一个网站都无任何病毒.弹窗广告,并且可以快速访问.其中包含音乐试听类.电影观看类.购物指导类.相亲交友类.网络赚钱类.美食介绍类.旅游信息类.奇趣万象类 ...

最新文章

  1. 2018 JVM 生态报告:79% 的 Java 开发者使用 Java 8
  2. 整理了一下Asp.net源码常见问题(完善中...),欢迎大家补充修正(最后更新于06-01)!...
  3. 如何在GNOME中添加自己的菜单项
  4. Java函数式编程和Lambda表达式
  5. 什么是jsf_为什么应该避免JSF
  6. oracle cogs 科目,请问R12中,Mtl_material_transaction中的 COGS Recognition记录是干啥的?
  7. P3512 [POI2010]PIL-Pilots(单调队列+二分)
  8. convert mysql_MySQL的CONVERT()
  9. 第六届 蓝桥杯 省赛 第一题 奖券数目
  10. matlab中svm testacc参数,使用Matlab进行交叉验证的多类SVM的完整示例
  11. Linux学习第八篇之文件搜索命令find、locate、which、whereis、grep
  12. 《OpenGL编程指南(原书第9版)》——第1章 1.0OpenGL概述
  13. 计算机无法识别psp usb设备,PSP降级导致USB连接电脑识别问题解决办法
  14. Python pytz时区转换
  15. MNN源码阅读之模型转换
  16. html适配手机 响应式,移动端适配(响应式)
  17. 1.11——Go语言适合做什么
  18. C/C++中的pi(pai)怎么打 【c语言】
  19. docker启动nginx及问题处理
  20. 冷暖自知!4年Java小伙收获美团Offer,分享他的社招Java岗4面面经

热门文章

  1. 离线安装openOffice
  2. 小米android的手机根目录,手机网站根目录在哪?
  3. java练习项目 拼图游戏
  4. lzg_ad:FBW控制台命令详解
  5. document.onclick是什么
  6. 20180805:求出字典d = {'a':1,b:2,c:3,d:4,e:4}中的最大的字母,并打印出来
  7. 国内最新Unity3D视频教程合辑
  8. python通过串口发送bin文件
  9. [4G5G专题-9]:RRU 数字上变频DUC与数字下变频DDC
  10. Ubuntu18.04美化桌面