利用代码托管平台 Pages 搭建静态个人网站

一、写在前面

笔者最近接触生成个人博客的开源项目，玩着挺有意思的。用简单的命令生成vue或go的项目模板。通过markdown语言文档生成静态页面。网上也有很多教学博客。感谢各位大神博主的分享。这里也简单记录下我的使用笔记。

二、开源的hexo框架

框架简介

官方网站

安装步骤

安装Node.js 下载安装包直接安装即可
安装Hexo
- 安装Hexo： npm install hexo-cli -g 如果提示权限问题则使用sudo运行。
- 初始化博客目录：hexo init blog
- 切换到博客目录下安装依赖包：cd blog && npm install
- 启动预览服务器：hexo s在浏览器中访问localhost:4000，如果一切正常就可以看到博客页面了
- 根目录下的_config.yml是Hexo的配置文件，可以按照个人喜好修改博客的配置。
Hexo 常用命令：
- hexo new [name] 新建一篇以[name]为标题的博文，博文保存在/source/_posts目录下
- hexo new [layout] [name] 新建layout类型的文章
- hexo g生成静态文件
- hexo d按_config.yml的配置部署
- hexo g -d生成静态文件后部署
- hexo clean清除静态文件缓存
- hexo g生成的静态文件通常在 [博客目录]/public 下面，把这些全部上传到web服务器的 WWW目录下即可。

参考链接

三、开源的Hugo框架

框架简介

官方网站
 官方安装文档
 HUGO安装包下载地址
 主题网站

安装步骤

下载hugo安装包并安装到本地电脑、配置环境变量并执行 hugo version/hugo help查看当前版本
通过hugo new site [项目名称]创建新的站点
去主题网站下载喜欢的主题放到主题目录，注意部分是收费版。例如：git clone [email protected]:shankar/hugo-grapes.git
hugo new first.md创建第一篇文章
hugo server --theme=hugo-grapes --buildDrafts本地启动查看效果
同时你会发现多出个静态网站的文件夹

参考链接

四、开源的vuepress框架

框架简介

官方网站

安装步骤

安装Node.js 下载安装包直接安装即可
安装Vuepress到本地 npm install -g vuepress 当然npm速度比较忙推荐阿里cnpm 这个怎么弄自行百度

创建新的项目

创建目录mkdir vuepress-demo & cd vuepress-demo
npm init -y 初始化项目

vim package.json 编写配置文件

{
        
        
   "name": "vuepress",
   "version":"1.0.0",
   "description":"这只是个例子",
   "main":"index.js"，
   "scripts":{
        
        
     "docs:dev": "vuepress dev docs",
     "docs:build": "vuepress build docs"
   },
   "keywords":[],
   "auther":"Arber",
   "license":“ISC”
 }

创建目录结构

   vuepress-demo
   		├─package.json
   		├─docs
   	    |  ├─README.md
   		|  ├─.vuepress
   		|  |     ├─config.js
   		|  |     ├─public
   		|  |     |   └favicon.ico

修改配置文件

			module.exports = {
        
        
			    title: 'Hello VuePress',
			    description: 'Hello, my friend!',
			    head: [
			        ['link', {
        
        
			            rel: 'icon',
			            href: `/favicon.ico`
			        }]
			    ],
			    dest: './docs/.vuepress/dist',
			    ga: '',
			    evergreen: true,
			}
 ```

修改README.md

	---
	home: true
	heroImage: /favicon.ico
	actionText: 快速上手 →
	actionLink: /guide/
	features:
	- title: 简洁至上
	  details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
	- title: Vue驱动
	  details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。
	- title: 高性能
	  details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。
	footer: MIT Licensed | Copyright © 2018-present xxxxxx
	---

运行项目 vuepress dev docs

参考链接

五、开源的Jekyll、netlify框架

这个暂时还没研究，后续有时间补上

六、发送到代码托管平台的相关配置

1、GitHub Pages

创建新的项目项目命名为 你的账号名称.github.io
将你的讲台网站上传到你的新的项目中
浏览器登陆访问http://你的账号名称.github.io
在项目配置中可以绑定你的域名和开启https访问。但是每次提交域名都会改回默认都会更改，解决方案为在项目根目录创建文件名为CNAME 文件内容为你要绑定的域名即可。