首页企业服务利用hexo和GitHub搭建属于自己的个人网站利用hexo和GitHub搭建属于自己的个人网站

利用hexo和GitHub搭建属于自己的个人网站


直接上图!!

搭建静态页面_github搭建静态网站_如何搭建静态网站

个人博客

你们想要这样的个人网站吗?

废话不多说。

现在我手把手教你们如何制作一个像我这样的个人网站!!

github搭建静态网站_如何搭建静态网站_搭建静态页面

因为我们要使用到hexo框架和两个东西,所以我先来简单介绍一下hexo。

hexo简介

Hexo是一款基于Node.js的静态博客框架,依赖少易于安装使用,可以方便的生成静态网页托管在和上,是搭建博客的首选框架。大家可以进入hexo官网进行详细查看,因为Hexo的创建者是台湾人,对中文的支持很友好,可以选择中文进行查看。

这个是hexo官网:

准备工作-----hexo框架的搭建需要的东西

首先要有一个账号

其次安装node.js,npm依赖

然后安装git工具

安装git

系统:打开浏览器去git官网下载,下载后会有一个Git Bash的命令行工具,以后就用这个工具来使用git

git官网:

github搭建静态网站_搭建静态页面_如何搭建静态网站

然后默认安装

:对来说实在是太简单了,只需一串代码

sudo apt-get git

arch系可以用aur或者安装git

sudo -S git

安装好后,用git --来查看一下版本

安装

Hexo是基于编写的,所以需要安装一下和里面的npm工具。

系统:去官网下载就行了。

官网:ttps:///en//

github搭建静态网站_搭建静态页面_如何搭建静态网站

然后默认安装

sudo apt-get

sudo apt-get npm

arch系同理,使用aur或者来安装

sudo -S

sudo -S npm

安装完后,打开命令行(打开Git Bash命令工具)

node -v

npm -v

搭建静态页面_github搭建静态网站_如何搭建静态网站

顺便说一下,在git安装完后,就可以直接使用git bash来敲命令行了,不用自带的cmd,cmd真的有亿点难用。

安装hexo

前面git和安装好后,就可以安装hexo了,你可以先创建一个文件夹blog,然后cd到这个文件夹下(或者在这个文件夹下直接右键git bash打开)。

特别注意的是:国内npm安装依赖实在是太慢太慢太慢了,尤其一些依赖小则一百兆左右,大则几百甚至上G兆,所以强烈推荐使用淘宝镜像cnpm安装依赖,淘宝镜像安装方法如下:

npm -g cnpm --=

//查看cnpm是否安装成功

cnpm -v

//如果出现版本号的信息,说明你安装成功

如何搭建静态网站_github搭建静态网站_搭建静态页面

然后所有的npm操作你都可以换成cnpm操作了,当然下面为了大家不混淆,还是用的npm操作,你操作的时候全都可以替换成cnpm

通过以下命令行全局安装Hexo

npm -g hexo

如何搭建静态网站_github搭建静态网站_搭建静态页面

初始化hexo

cd blog

//进入这个文件夹

这个blog可以自己取什么名字都行,然后下一步

hexo init

github搭建静态网站_搭建静态页面_如何搭建静态网站

初始化完成后,在你根目录下面会生成一些文件

搭建静态页面_github搭建静态网站_如何搭建静态网站

然后你就可以进行hexo操作生成文章以及本地运行

执行命令

hexo g # 生成对应的html

hexo s # 启动服务

github搭建静态网站_如何搭建静态网站_搭建静态页面

上面命令执行完成后,你就可以在根目录的文件夹下看到对应的生成页面(这个文件夹的内容也会是你推送到上的内容)

hexo s是开启本地预览服务,打开浏览器访问:4000 即可看到内容。

使用ctrl+c可以把服务关掉。

现在他长这个样子

如何搭建静态网站_github搭建静态网站_搭建静态页面

创建个人仓库

首先,你先要有一个账户,去注册一个吧。

注册完登录后,在新建仓库

github搭建静态网站_如何搭建静态网站_搭建静态页面

创建一个和你用户名相同的仓库,后面加..io,只有这样,将来要部署到 page的时候,才会被识别,也就是xxxx..io,其中xxx就是你注册的用户名。我这里是已经建过了。

如何搭建静态网站_搭建静态页面_github搭建静态网站

点击 。

生成SSH添加到

git -- user.name ""

git -- user. ""

这里的输入你的用户名,输入你的邮箱。这样才能知道你是不是对应它的账户。

github搭建静态网站_如何搭建静态网站_搭建静态页面

可以用以下两条,检查一下你有没有输对

git user.name

git user.

搭建静态页面_如何搭建静态网站_github搭建静态网站

然后创建SSH,一路回车

如何搭建静态网站_github搭建静态网站_搭建静态页面

这个时候它会告诉你已经生成了.ssh的文件夹。在你的电脑中找到这个文件夹。

github搭建静态网站_搭建静态页面_如何搭建静态网站

ssh,简单来讲,就是一个秘钥,其中,是你这台电脑的私人秘钥,不能给别人看的,.pub是公共秘钥,可以随便给别人看。把这个公钥放在上,这样当你链接自己的账户时,它就会根据公钥匹配你的私钥,当能够相互匹配时,才能够顺利的通过git上传你的文件到上。

而后在的中,找到SSH keys的设置选项,点击New SSH key

把你的.pub里面的信息复制进去。

搭建静态页面_如何搭建静态网站_github搭建静态网站

搭建静态页面_如何搭建静态网站_github搭建静态网站

然后在中,查看是否成功

ssh -T

将hexo部署到

现在,我们就可以将hexo和关联起来,也就是将hexo生成的文章部署到上,打开站点配置文件.yml,翻到最后,修改为

:

type: git

repo:

:

就是你的账户

这个时候需要先安装-git ,也就是部署的命令,这样你才能用命令部署到。

npm hexo--git --save

如何搭建静态网站_搭建静态页面_github搭建静态网站

然后执行命令

hexo

hexo

hexo

其中 hexo 清除了你之前生成的东西,也可以不加。

hexo 顾名思义,生成静态文章,可以用 hexo g缩写

hexo 部署文章,可以用hexo d缩写

注意时可能要你输入和。

不出意外现在我们就部署成功了,过一会儿就可以在 这个网站看到你的博客了!!

更改主题

第一次初始化的时候hexo已经帮我们写了一篇名为 的文章,默认的主题比较丑,但是不要急,我们可以更改自己喜欢的主题。你可以先在官网中查看自己喜欢的主题,然后下载下来就可以了。

主题官网:

我用的是这个主题

如何搭建静态网站_搭建静态页面_github搭建静态网站

进入主题官网下载主题复制到根目录下的文件夹中即可

搭建静态页面_如何搭建静态网站_github搭建静态网站

修改根目录.yml文件中的: 改为: hexo---dev,然后重新执行hexo g来重新生成,然后hexo d提交就OK啦。

github搭建静态网站_如何搭建静态网站_搭建静态页面

搭建静态页面_如何搭建静态网站_github搭建静态网站

如果出现一些莫名其妙的问题,可以先执行hexo 来清理一下的内容,然后再来重新生成和发布。

这样你的新主题就更改成功,然后这个主题下还有很多详细高端配置,就暂时不在这里详说了,可以去主题官网点击阅读文档查看详细教程

写博客

所有的都配置好,怎么去写博客呢?

定位到我们的项目文件(我的在目录/中),你所有的初始博客都是保存在这里的,包括你所有的md文件

cdD:\blog\\

定位之后你就可以在定位的文件夹里生成md文件了

hexo new 'xxx'

github搭建静态网站_搭建静态页面_如何搭建静态网站

当然,你也可以自己手动在文件夹中创建.md文件,进行编写

格式

---

: #文章页面上的显示名称,一般是中文