今天用了一上午的时间搭建了一个免费的博客或写作网站,废话不多说先看看效果:
PC版:
mobile版:
https://www.shuimqkl.com/
或者微信公众号回复YY。
是不是很酷炫。接下里教大家如何搭建这样一个酷炫的免费写作网站,提高自己的逼格。
使用到的工具有:node.js 、npm、Sublime Text 、git 、Hexo 、github账号。
技能掌握:简单的npm 命令、简单的Hexo配置文件配置、简单的git命令(其他的不懂给我留言,哈哈哈)
开始我的免费建站:
第一部:搭建写作环境
在搭建写作环境的过程的确是一个比较烦的步骤,因为每个人的电脑配置以及出现的奇葩情况都不一样的,所以这里如果有在搭建过程中遇到问题时多度娘或者给我留言。
好的,开始我们写作环境搭建之前你需要下载必要的环境工具:node.js 下载地址:http://nodejs.cn/ , git 下载地址:https://git-scm.com/ 然后根据自己的系统进行傻子安装,这里我就不多做介绍,不会再问问我。
1.1
当你的这两个工具安装完成以后可以用下面两个命令来检查是否安装成功。
node -v
npm -v
git -v
如果没有什么意外,就该就可以成功的,这里的npm是在node安装的时候就同时安装完成的。一个包的管理器,当然你也可以用yum.应人而异。
1.2
当我们安装完成最基础的工具后,我们就开始搭建写作环境了,这里我选用最流行的一个博客框架Hexo,官网地址:https://hexo.io/ 这是一个非常号的写作框架,其社区有丰富的模版主题,又可以自己编写属于自己的页面。好的,正如你打开这个工具官网的地址很显目的就是这条命令
npm install hexo-cli -g
对,没错,你先把这个工具安装到你的全局环境中
接下来在你任意指定的一个目录中开始创建你的网站工程,比如我在D盘下创建了一个文件夹myBlog,进入到你的myBlog文件夹下:
// 初始化你的网站工程
hexo init testblog
// 执行上面命令后当前目录会生成一个项目工程
// 进入项目工程
cd blog
// 安装项目中使用到的以来包
npm install
// 启动本地的服务 使用浏览器访问 http://localhost:4000
hexo server
如果本地服务能正常访问,说明你的第一个写作网站就已经完美的搭建好了,接下来就然我们进行写作的创建和网站主题的加炫过程
第二部:创建写作网站工程
2.1
在第一部中我们已经创建好了所要搭建的网站基本环境和项目工程,接下来我们就开始进行写作,当然对于静态文件工程,一篇文章对应一个页面,所以写作时需要掌握如何使用markdown来写作,其实语法都很简单的,主要还是要习惯怎么去使用它。可能和我们平时写word不太一样,具体可以去晚上找找,非常之多,不懂再问我。
具体操作查看官方文档比较详细:https://hexo.io/zh-cn/docs/writing.html
我这里只是一个比较粗略的说明
在我们创建好的项目工程中通过如下命令去创建一片文章:
//创建一个.md文件 默认布局模版 hexo new [layout]
hexo new hellworld
当你的文件创建成功以后就可以在工程目录下source/_posts/ 会自动生成一个hellworld.md的文件,该文件是由你选定的默认布局模版来生成的。包括页面的头部等信息。接下来在你生成的文件中可以开始发挥的的写作天赋了。。。
2.2 当你写作完成以后,那么接下来就开始编译你的项目,如果说你对官方的给你默认themes 觉得太low,那么很好,这里给你提供了大量的插件主题,按照你自己喜欢的风格去选择,主题资源地址:https://hexo.io/themes/
选择你喜欢的主题后,你可以将它下载下来直接放到你的工程目录的themes文件夹下面,然后修改一下更换主题名
// 在 _config.yml配置文件中找到theme: [对应所要更换的主题文件夹名]
// 然后本地进行编译
hexo d // 或者 hexo deploy
hexo g // 或者 generate
hexo server 8008 // 启动本地服务 使用http://localhost:8008查看效果 -- 完美
基本的写作流程我们已经讲完,下面是要让全世界的人都能看到你的文章了。
第三部:部署我的网站,让全世界膜拜你
3.1 本部是将你写好的文章发布到对应的服务器上。首先你需要在GitHub或者中国码云(不是“马”云,)的账号。
这里就拿GitHub来举个例子吧,基本账号申请如果不懂再留言,在创建好的账号中点击创建一个new repository ,在你填写的地址一定要以下格式:
[你登陆的账号名称].github.io
然后你创建完成这个库后,如果想用自己的域名的话,你可以在库目录下新建一个没有后缀名CNAME文件,并在该文件下写好你的域名地址。
3.2 接下来,你的仓库已经差不多创建完成了,那么需要在本地将我们写好的文章提交到创建的仓库中,这样才可以完美的显示。打开你的工程下的_config.yml文件,配置你的github账号和地址如下:
deploy:
type: git
repo: [你的仓库地址]
在配置完成以后,我们需要添加一个hexo-git工具,来实现文章发布提交的流程自动化过程。
npm install hexo-deployer-git --save
当安装好这个插件以后,我们就可以实现文章的提交到我们的仓库中了
// 使用该命令则会一键部署到我们的仓库中
hexo deploy
这样就很完美的通过你自己的域名或git的域名访问到你发布的文章了,接下来就是展示你自己才华的平台,你可以将你自己的博客系统做得比你想象的完美。。。
来再次体验以下,这里可以慢慢添加你自己需要的功能。
https://www.shuimqkl.com/