闲谈
拿出你的气质,打开你的电脑,借你半小时搭建好属于你的hexo博客,小生用dockerfile自动帮你搭建好;
你只需要在你的mac或linux或windows上提前把docker安装好,如何安装不是我的重点,请参考Docker安装;
作为程序员,博客就像你的影子,我都已经忘了内心曾经多少次告诫自己,一定要搭建一个属于自己的技术博客,奈何日复一日过去了,近来终于落实到行动上来,所谓明日复明日,明日何其多,早晚要做的事,劝君晚做不如早做。
搭建Hexo
获取基础镜像
Docker安装成功之后方能进行接下来的操作,如果对Docker基本命令不熟悉又想真懂的可以看下我的另一篇文章Docker最简教程。首先从我的Docker Hub仓库上获取基础镜像:
1 | $ docker pull icoty1/ubuntu-hexo-blog # 从Docker hub上的icoty1用户下获取基础镜像 |
生成Dockerfile
进入一个空的目录下新建空文件Dockerfile,复制如下内容:
1 | # 基础镜像 |
更换主题
Dockerfile中的最后两行内容表示的含义是从github上把hexo-theme-yilia克隆下来并重命名成yilia,然后放到容器的/blog/themes/目录下,其中hexo-theme-yilia是hexo的主题,hexo有很多种主题,用每一种主题搭建出来的hexo博客界面美观和布局都不尽相同,你可以通过hexo官网上浏览每一种主题长啥样子,通过github获取主题的源码仓库,选择一个你喜欢的主题,并相应的修改这两行。假如你从github选择的主题仓库地址是https://github.com/yscoder/hexo-theme-indigo.git , 那么你需要按照如下方式进行修改,如果你就想用yilia,那么你不需要做任何修改,我用的主题是https://github.com/theme-next/hexo-theme-next.git
1 | && git clone https://github.com/yscoder/hexo-theme-indigo.git themes/indigo \ |
构建Hexo镜像
在Dockerfile的同级目录执行:
1 | $ docker build -t icoty1/ubuntu-hexo . # 把icoty1/ubuntu-hexo替换成你取的名字 |
启动容器
1 | /* 把[IMAGE ID]替换成上一步构建出来的镜像的ID,该句执行成功会多出来一个容器并有一个[CONTAINER ID] |
浏览器测试
浏览器访问http://localhost:4000 ,出现下图说明已经成功,以后你的博客配置,文章撰写和发布等,都在/home/yangyu/blog/目录下进行,这和在容器内部/blog/目录下操作完全对等。
Hexo部署到Github
注册Github账户,如果已经注册,跳过此步;
在github上仓库“用户名.github.io”,比如我的用户名为icoty,仓库名则为:icoty.github.io;
执行如下命令生成ssh key,执行完后复制~/.sshid_rsa.pub文件内的全部内容,按照图示添加ssh keys,并粘贴保存到Key栏中,Title栏随便取。
1 | $ cd ~/.ssh |
配置Hexo主题
编辑/blog/_config.yml文件,编辑标题、描述信息、Github信息,下图参见我的:
1 | # Site |
执行如下命令发布到github上,通过“https://你的github用户名.github.io”访问,我的是https://icoty.github.io
1 | $hexo generate |
编辑/blog/themes/yilia/_config.yml文件,自定义其他配置,如友链、评论、分享、头像等,这些配置并不是一定要做,做不做都行,只是配置的完善些,你的Hexo博客界面看起来美观些,如何配置在此不一一赘述,请自行查看对应主题的官方文档和Github说明。如果你能操作这里,说明我这个教程还是有效的,感谢你的坚持!
Hexo命令
Hexo搭建好后,你可以写博客发布到GitHub 上,别人通过“https://你的github用户名.github.io”就能访问你的博客和看到你写的文章,而这个章节就是教你怎么在本地写你的博客,写博客用的MarkDown语法,推荐你安装MarkDown编辑器Typora。下面列出写博客过程中常用的命令,这些命令都需要走到/blog/目录下执行。
1 | $hexo new "my-hexo" #新建my-hexo文章,在/blog/source/_post/目录下生成my-hexo.md,在这个文件里面写你的文章 |
MarkDown语法
这个比较基础,网上教程也一大堆,MarkDown很容易学,放心比九九表容易多了,只要你用markdown实际动手写过一篇博文后就上手了,因此没啥可说的。
Next主题配置
接下来的内容是针对next主题的配置,因为我选择的是next,不同主题可能有差异,特此说明。
修改文章内链接文本样式
打开themes/next/source/css/_common/components/post/post.styl文件,在文件最后且在@import之前添加如下代码:
1 | // 文章内链接文本样式 |
文章末尾添加“文章结束”标记
在themes/next/layout/_macro/目录下新建passage-end-tag.swig,填入如下内容:
1 | <div> |
然后编辑themes/next/layout/_macro/post.swig,按照下图添加代码块:
1 | <div> |
最后编辑themes/next/_config.yml,添加如下内容:
1 | # 文章末尾添加“本文结束”标记 |
添加网页加载进度条
打开themes/next/_config.yml,搜索“pace:”,设置为true。
1 | pace: true |
设置文章的显示顺序
编辑node_modules/hexo-generator-index/lib/generator.js,在return之前添加如下代码:
1 | posts.data = posts.data.sort(function(a, b) { |
然后在每篇文章的头部添加top字段,top值越大的文章显示越靠前。
1 | --- |
添加底部的小图标
打开themes/next/layout/_partials/footer.swig搜索with-love,修改为如下代码。从fontawesom选择你喜欢的图标名称,我这里选择的是heart。
1 | <span class="with-love" id="animate"> |
文章底部添加版权信息
在themes/next/layout/_macro/下新建 my-copyright.swig,填入如下内容:
1 | {% if page.copyright %} |
然后在themes/next/source/css/_common/components/post/下新建my-post-copyright.styl,填入如下内容:
1 | .my_post_copyright { |
接着编辑themes/next/layout/_macro/post.swig文件,按照下图位置添加如下代码:
1 | <div> |
接着在themes/next/source/css/_common/components/post/post.styl文件最后添加如下代码:
1 | @import "my-post-copyright" |
然后,还需要在文章的头部添加copyright字段:
1 | --- |
最后,编辑根目录下的_config.yml文件,把url换成你的主页:
1 | # URL |
添加网易云音乐外链
登陆网易云音乐网页版;点击个人头像“我的主页”;然后能够看到“我创建的歌单”,如果没有则创建一个歌单;选中一个歌单点进去,能够看到“歌曲列表”,点击“歌曲列表”右边的“生成外链播放器”;然后点击右下角的“复制代码”,粘贴到themes/next/layout/_macro/sidebar.swig文件中指定的位置即可,我的是放在侧栏中”友链”下面的。
设置文章缩略显示
编辑themes/next/_config.yml,搜索auto_excerpt,设置为true:
1 | # Automatically Excerpt (Not recommend). |
自定义代码块样式
打开themes/next/source/css_custom/custom.styl,添加如下内容:
1 | // Custom styles. |
把一篇文章归为多类
如下会把该文章归为Linux/IPC类。
1 | categories: |
如下会把该文章归为Linux/IPC和TCP两类。
1 | categories: |
v1.5.2