头图展示
毕业在互联网从事后台开发即将三年了, 给自己搭建个窝总结下工作过程中遇到的一些问题以及自己相应的解决方案. 基于 hexo 和 GitHub 搭建自己的博客站点, 是考虑到 GitHub 提供了免费的服务, 自己无需运维服务服务, 再者这种方案自己更加可控, 更加简洁, 没有一些乱七八糟的广告干扰.
hexo 介绍
Hexo 是一款基于 Node.JS 的静态博客框架, 依赖少易于安装使用, 可以方便的生成静态网页托管在 GitHub, 且 hexo 对中文支持友好, 更加详情内容可参考 hexo 官网介绍 https://hexo.io/zh-cn/ .
hexo 服务搭建
1. 注册 GitHub 帐号并创建新的 repository, 用于存放 hexo 生成的博客文件
注意 repository name 得以 帐号名. GitHub.io 格式
2. 在自己的私人 Git 服务或者在 GitHub 新建立一个 repository 用于存放源文件
- # pull 源码文件管理库
- Git clone Git@GitHub.com:yongssu/blog.Git
- # 在自己的机器上安装 node 并安装 hexo
- NPM install -g hexo-cli
- # 在新的地方运行 hexo 初始命令
- hexo init new_blog
- # 将 new_blog 生成内容拷贝到 blog 文件内
- # 运行以下命令就能在本地查看 hexo 服务, 地址 localhost:4000
- hexo new test_my_blog #创建新的 blog 文件
- hexo g #生成
- hexo s
- # 然后就可以在 blog 对源文件进行管理
3. 部署 blog 文章到 GitHub
在 blog 根目录下_config.YAML 配置站点信息以及上传 GitHub 地址.
# Site
title: YONGSSU 的技术站点
- subtitle:
- description:
- keywords:
- author: yongssu
- language:
- timezone:
- deploy:
- type: Git
- repo: https://github.com/yongssu/yongssu.github.io
- branch: master
至此就可以通过 注册名. guthub.io 访问个人站点了.
4. 配置域名
如果需要使用自己的域名, 在域名网站注册域名并将域名 cname 定向到 yongssu.GitHub.io, 然后在 yongssu.GitHub.io repository 下配置相应 Custom domain 为自己的域名.
至此, 就可以通过自己的域名访问自己的个人网站了.
5. 切换默认 hexo 主题
这里采用 next 主题, 在 blog 文件下, 下载相应的主题文件, 并在 blog 跟目录下_config.YAML 配置文件中修改主题为 next. 主题相关的的配置在主题文件下的相应_config.YAML 文件进行配置.
6.next 主题 tags 页面显示
- # 建立 tags 页面, 在 source 会建立 tags 文件夹
- hexo new page tags
- # 修改 tags/index.md type 为 "tags"
- ---
- title: tags
- date: 2018-12-22 21:42:59
- type: "tags"
- ---
- # 在 next 的配置文件下_config.YAML 开启 tags 页面标签
- menu:
- home: / || home
- #about: /about/ || user
- tags: /tags/ || tags
7. 提交 Git 自定义域名被重置
使用 gitpage 功能将博客托管在了 GitHub 上, 并配置 CNAME 将自己的域名解析了过去, 在 GitHub 的仓库设置中开始 custom domain 的功能, 这时候就可以直接使用自己的域名访问个人博客. 但是发现一个问题是, 每次配置 custom domain 之后, 再次 hexo d 之后, custom domain 会被重置失效.
解决方案
在 source 下新建 CNAME 文件, 然后将自己的域名写入文件中, 再次 deploy 就能解决以上问题.
图片资源上传
当博文中有图片时, 如果直接放在 source 文件中, 会直接占用大量存储空间, 因为图片会占据大量的存储的空间, 加载的时候相对缓慢 , 这时考虑把博文里的图片上传到某一网站, 然后获得外部链接, 使用 Markdown 语法, 完成图片的插入, 这种网站就被成为图床. 个人选择微博图床和对应 Chrome 插件配合使用. 使用如下:
微博图床使用截图
hexo 常用命令介绍
- NPM install hexo -g #安装 Hexo
- NPM update hexo -g #升级
- hexo init #初始化博客
- # 简写命令
- hexo n "我的博客" == hexo new "我的博客" #新建文章
- hexo g == hexo generate #生成
- hexo s == hexo server #启动服务预览
- hexo d == hexo deploy #部署
- # 常用命令
- hexo server #Hexo 会监视文件变动并自动更新, 无须重启服务器
- hexo server -s #静态模式
- hexo server -p 5000 #更改端口
- hexo server -i 192.168.1.1 #自定义 IP
- hexo clean #清除缓存, 若是网页正常情况下可以忽略这条命令
本文参考配置链接 https://zhuanlan.zhihu.com/p/26625249
更多技术内容请访问个人博客 http://www.suys.top/
来源: http://www.jianshu.com/p/c73ad463772f