GitHub + Hexo 个人博客网站搭建

发表于   |   更新于 | 分类于 | 阅读次数:
字数统计: 1.8k
创建仓库
  1. 仓库名应该为：用户名.github.io 这个用户名使用你的GitHub帐号名称代替，这是固定写法
  2. 安装Git
  3. 安装Node.js :Hexo基于Node.js
    • 安装Node.js会包含环境变量及npm的安装
      • 安装后，检测Node.js是否安装成功，在命令行中输入 node -v
      • 检测npm是否安装成功，在命令行中输入npm -v
安装Hexo
  1. 在本地新建文件夹,Hexo框架和以后自己发布的网页都会在这个文件夹中.右击文件夹打开Git Bash
  2. 输入命令npm install -g hexo-cli
  3. 输入命令hexo -v验证是否安装成功
  4. 初始化文件 hexo init blog –站点被初始化在了blog文件中…
推送网站
  1. 在blog根目录里的_config.yml文件称为站点配置文件
  2. 进入根目录里的themes文件夹，里面也有个_config.yml文件，这个称为主题配置文件
  3. 将Hexo与GitHub关联起来，打开站点的配置文件_config.yml，翻到最后修改为:
    • deploy:
    • type: git
    • repo: 这里填入之前在GitHub上创建仓库的完整路径，记得加上 .git
    • branch: master
    • 其实就是给hexo d 这个命令做相应的配置，让hexo知道要把blog部署在哪个位置
  4. npm install hexo-deployer-git --save #安装Git部署插件
  5. 依次输入hexo clean hexo g hexo d;打开浏览器，在地址栏输入你的放置个人网站的仓库路径，即 GitHub用户名.github.io即可浏览博客
    以上操作均在/Blog/blog文件夹下进行
绑定域名

需要自行购买阿里云/腾讯云域名—此步可略过

更换为NexT主题
  1. 在blog路径下,把默认主题更改为Next主题:
    • 命令git clone https://github.com/iissnan/hexo-theme-next themes/next
    • 这是将Next主题下载到blog目录的themes主题下的next文件夹中
  1. 打开 站点配置文件， 找到 theme 字段，并将其值更改为 next
  2. 首先启动 Hexo 本地站点，并开启调试模式（即加上 –debug），整个命令是 hexo s --debug
  3. Scheme 的切换通过更改 主题配置文件，搜索 scheme 关键字。 你会看到有三行 scheme 的配置，将你需用启用的 scheme 前面注释 # 去除即可
  4. 编辑 站点配置文件， 将 language 设置成你所需要的语言
    • 英语 代码:en
    • 简体中文 代码: zh-Hans
  5. 编辑 主题配置文件，修改菜单项:
    • 默认菜单项有6个:Home,archives,categories,tags,about,commonweal–后面四个需要手动创建这个页面
    • 设置菜单项的显示文本:翻译文本放置在 NexT 主题目录下的 languages/{language}.yml （{language} 为你所使用的语言)
      • 以简体中文为例，若你需要添加一个菜单项，比如 something。那么就需要修改简体中文对应的翻译文件 languages/zh-Hans.yml，在 menu 字段下添加一项 :something: 有料
    • 设定菜单项的图标，对应的字段是 menu_icons,可以设置成 false 来去掉图标
  6. 默认情况下，侧栏仅在文章页面（拥有目录列表）时才显示，并放置于右侧位置。 可以通过修改 主题配置文件 中的 sidebar 字段来控制侧栏的行为
    • 设置侧栏的位置，修改 sidebar.position 的值
    • 设置侧栏显示的时机，修改 sidebar.display 的值
  7. 编辑 主题配置文件， 修改字段 avatar， 值设置成头像的链接地址
    • 放置在 source/images/ 目录下 配置为：avatar: /images/avatar.png
  8. 编辑 站点配置文件， 设置 author 为你的昵称
  9. 编辑 站点配置文件， 设置 description 字段为你的站点描述。站点描述可以是你喜欢的一句签名
  10. 设置阅读全文:
    • auto_excerpt:
    • enable: true
    • length: 150 //首页显示150截取字符长度的内容
添加标签页面
  1. hexo new page tags
  2. source文件夹下有了tags/index.md，打开index.md文件,在最后的—上面一行添加type: “tags”
  3. 设置具体文章的tags:当要为某一篇文章添加标签，只需在blog/source/_post目录下的具体文章的tags中添加标签即可: tags: [npm, hexo, github],在日期的下一行添加即可,注意空格
添加分类
  1. hexo new page "categories"
  2. 在站点目录下的source文件夹下，会新增一个categories的文件夹，里面有一个index.md文件
  3. 在最后加上两行:type: "categories" comments: false
    • comments可以设置为false，含义是打开分类页面，评论插件不显示；如要显示则改为true
  4. 设置具体文章的categories:当要为某一篇文章添加分类，只需在blog/source/_post目录下的具体文章的categories中添加标签即可: categories: 搭建博客,在日期的下一行添加即可,注意空格
添加about
  1. hexo new page "about"
  2. 其余步骤同tags和categories
其他主题设置

参考官网文档:http://theme-next.iissnan.com/theme-settings.html
参考博文:
https://blog.csdn.net/u011475210/article/details/79023429
https://www.cnblogs.com/php-linux/p/8416116.html
https://www.cnblogs.com/php-linux/p/8416116.html
https://blog.csdn.net/u012443858/article/details/60812982
https://www.jianshu.com/p/35e197cb1273
https://zhuanlan.zhihu.com/p/33616481

包括:

  • 设置RSS
  • 站点建立时间
  • 设置代码高亮主题
  • 侧边栏社交链接
  • 开启打赏功能
  • 搜索服务:algolia
  • 设置博文内链接为蓝色
  • 显示每篇文章字数
  • 显示站点文章总字数
  • 文章末尾添加版权说明
  • 修改文章底部的#号标签
  • 添加needmoreshare2分享
  • 添加文章更新时间
集成常用的第三方服务
  1. 百度统计:
    • 登录 百度统计(https://tongji.baidu.com/web/welcome/login)， 定位到站点的代码获取页面
    • 复制 hm.js? 后面那串统计脚本 id
    • 编辑 主题配置文件， 修改字段 baidu_analytics 字段，值设置成你的百度统计脚本 id
    • 该功能已成功加入，大约过20min后在百度统计上可以看到站点的访问情况
  2. 阅读量统计:
  • LeanCloud
其他个性化设计
  1. 给页面添加背景图片  

    在theme/next/source/css/_custom文件夹下打开custom.styl文件，往里面添加代码

  2. 文字背景色以及半透明的设置

    在theme/next/source/css/_custom文件夹下打开custom.styl文件，往里面添加以下代码

常用的Hexo命令
  1. npm install hexo -g #安装Hexo
  2. npm update hexo -g #升级
  3. hexo init #初始化博客
  4. 命令简写:
    • hexo algolia #更新搜索服务–更新文章之后
    • hexo n “my blog” == hexo new “my blog” #新建文章
    • hexo g == hexo generate #生成
    • hexo s == hexo server #启动服务预览
    • hexo d == hexo deploy #部署
  5. hexo server #Hexo会监视文件变动并自动更新，无须重启服务器
  6. hexo server -s #静态模式
  7. hexo server -p 5000 #更改端口
  8. hexo server -i 192.168.1.1 #自定义 IP
  9. hexo clean #清除缓存，若是网页正常情况下可以忽略这条命令
详细参考资料:

https://blog.csdn.net/u011475210/article/details/79023429 ## NexT文档:
http://theme-next.iissnan.com/getting-started.html ## Hexo指令文档:
https://hexo.io/zh-cn/docs/commands.html

发布及更新文章

在博客根目录下,即E:/Hexo/Blog/blog下

  1. hexo clean
  2. hexo g
  3. hexo d
  4. hexo algolia
Donate comment here