作为一个开发人员,如果有一个个人网站,必然是一个求职过程中的加分项。可是,开发、部署一个网站对于大多数人来说还是比较费劲的,漂亮的前端写不好,服务器还得收钱。所以,如何低成本的搭建自己的网站呢?不妨来到GitHub搭建自己的主页吧~
建站准备
工具准备
- Git 官网 下载页面
- Node.js官网 下载页面 还有个这…
- Notepad++ (用于编辑各种文档,强推!)官网 下载页面
- Sublime Text (用于书写md文件,后期下载即可!)官网 下载页面
知识储备
非必须,了解只是为了做出更个性化的页面
- DOS命令
- html,css,js 语法
- MarkDown 语法
其他准备
缺一不可!
- 耐心!
- 细心!
- 时间!
开始建站
GitHub注册并建立项目
- 注册GitHub官方地址
不多说,如果不会注册的话建议先补充一下电脑知识 -
点击右上角“+”后点击 “New respository”
- 命名为
username.github.io
。如我的用户名为sirzdy,所以 repository 命名为sirzdy.github.io。(务必保证这个名字是你的username!此处出现红色警示是因为我已经建立过了,你的应该是绿色提示)
- 点击按钮后浏览器会自动跳转到一个页面,关闭即可。
Git安装
安装完之后开始菜单会出现GitBash,GitCMD,GitGUI三个选项,我们后面需要使用GitBash。
Node.js安装
Hexo 安装
打开GitBash,执行 npm install -g hexo-cli
,等待安装完成……
使用Hexo搭建博客
官方文档 建议看官方的,如果实在看不懂或者不想看可以看看我写的。
- 在任意位置新建一个文件夹,如
J:\Hexo
- 进入到
J:Hexo
目录下,右键空白处选择 Git Bash Here
- 弹出GitBash窗口后,执行
hexo init
,直到出现INFO Start blogging with Hexo!
- 执行
hexo generate
或者简写hexo g
,执行完成,会在当前的J:Hexo
下生成很多文件和文件夹! - 执行
hexo server
或者简写hexo s
,直到出现INFO Start processing INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.
,这样就启动了本地服务器,在浏览器中输入localhost:4000
,就可以查看了。 - 配置
_config.yml
文件的deploy
部分,配置后如下
deploy:
type: git
repository: https://github.com/username/username.github.io.git
branch: master
此处要匹配GitHub项目地址!
- 执行
hexo deploy
完成后,就可以到username.github.io
进行访问了。
如发生 ERROR Deployer not found: git 或者 ERROR Deployer not found: github
解决方法:npm install hexo-deployer-git --save
使用Hexo
- 新建文章
hexo new "newpost"
hexo n "newpost"
- 新建页面
hexo new page "newpage"
-
hexo clean
删除生成的文件和缓存 -
hexo generate
hexo g
生成静态文件 -
hexo server
hexo s
启动本地服务器 -
hexo deplot
hexo d
发布网站(到Github之类)
这一篇整理的较为实用
当然还是官方的文档最强大,点我到官方文档
配置Hexo
就是修改_config.yml
文件,配合主题使用,可以产生千变万化的效果
使用Next主题
就目前查的资料以及亲身体验显示,Next主题是最好用的hexo建站主题之一。
官方文档,完全推荐,建议不要看我的了,因为我只写了一点最为重要的,而且也差不多是copy的。
安装主题
在 Hexo 中有两份主要的配置文件,其名称都是 _config.yml。 其中,一份位于站点根目录下,主要包含 Hexo 本身的配置;另一份位于主题目录下,这份配置有主题作者提供,主要用于配置主题相关的选项。
为了描述方便,在以下说明中,将前者称为 站点配置文件, 后者称为 主题配置文件。
- 进入到Hexo文件夹下,右键空白处选择 Git Bash Here
- 执行
git clone https://github.com/iissnan/hexo-theme-next themes/next
这是把hexo-theme-next克隆到themes/next文件夹下。
启用主题
打开站点配置文件,找到 theme 字段,并将其值更改为 next。
配置主题
配置 主题配置文件 和 站点配置文件。请移步此查看官方文档
正式进入博客内容————文章增删改
增加新文章
- 在gitbash中执行
hexo new "new post"
后,找到source/_posts/"new post.md" - 编辑文件。
(1)Sublime 使用sublime text打开,进行编辑。配合插件“OmniMarkupPreviwer”利用``ctrl+alt+O`进行浏览器实时预览 (用于编写md文件,相关工具很多,个人推荐有基础的使用这个,没有基础的话学习成本略大)。
(2)作业部落 - 执行
hexo clean
,hexo g -d
。
修改文章
- 找到要修改的文章。
- 编辑文件。
- 执行
hexo clean
,hexo g -d
。
删除文章
- 找到要删除的文章,删除。注意:至少留一篇文章,否则会报错。
- 执行
hexo clean
,hexo g -d
。