美文网首页GitHub上有趣的资源
github-hexo给你一个漂亮的主页

github-hexo给你一个漂亮的主页

作者: 吾心仔 | 来源:发表于2019-07-19 11:09 被阅读0次

假如你想自定义一个带有自己style的网站,那么跟我来一起学习一下吧!

我创建的这个博客(https://mrlsm.github.io
)是使用的github page + Hexo方法。

现在开始搭建属于自己的blog了

  • 环境搭建(git、node.js)
  • 安装和配置Hexo(选择模板)
  • 配置github仓库
  • 配置自己的网址(也叫域名)
  • 创建和发布文章

环境搭建

  • 安装git (使用git给github上传文章)

  • 安装Node.js(Hexo是基于Node.js开发的)

    安装git

    git官网(http://git-scm.com)
    从官网进行下载,并安装使用。

    安装Node.js

    进入官网(https://nodejs.org/en/)
    从官网进行下载,并安装使用。

    安装和配置Hexo

    打开电脑command(命令提示符)
    执行以下命令(可复制粘贴执行)

npm install -g hexo-cli
npm install

选择电脑中的一处地址建立你存放blog相关资料的位置。建立文件夹(hexo)

cd hexo (进入该文件目录下)
hexo init

如果没什么问题就可以启动本地这个Hexo服务

hexo server

看见以下log则说明你已经完成hexo的安装了

Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

好的,现在显示的网站为最基本的主题,现在我们可以更改一下主题
按ctrl+c关闭server
我博客使用的主题是(https://github.com/litten/hexo-theme-yilia)

打开终端窗口,输入一下命令,将目录切换到Hexo文件夹内的themes文件夹内

cd themes

然后把这个主题从github网站上clone下来,保存为yilia文件

git clone https://github.com/litten/hexo-theme-yilia.git

也可以打开链接复制下来解压到你的themes目录下,保存为yilia文件

然后打开Hexo文件夹下面的_config.yml文件,修改里面的theme为yilia

重新打开server,浏览器输入http://0.0.0.0:4000/ 主题就发生了变化

好了,到此为止我们已经完成了本地Hexo的安装和配置。

配置github仓库

github官网(http://www.github.com)

进入github网址,注册一个账号,然后创建一个的放博客文章的仓库
点击Crete a repositor
[图片上传中...(image-6666ea-1563505540443-2)]

注:你博客的访问地址,也就是仓库名 用户名.github.io必须是这个结构,不能有一点偏差。就按照我的方式创建就行,只需要把用户名改为你的
然后点击创建,会初始化一个空的仓库。

然后就是配置SSH

命令行方法:
执行下面命令生成SSH

ssh-keygen
敲三次回车,既可以生成id_rsa.pub文件。

这里面就是SSH key的内容
然后使用vim编辑器打开这个文件

vim ~/.ssh/id_rsa.pub

然后使用鼠标拷贝里面的内容(退出vim编辑器命令:wq)

打开你的github,点击Setting
点击左边SSH keys
点击右边Add SSH
然后把复制的内容粘贴到下面那个框里面,title随便自己写。
过程可能会让你输入一次密码,输入即可!
配置好就行了

判断SSH是否配置好

ssh -T git@github.com

出现Hi CoderTian! You’ve successfully authenticated, but GitHub does not provide shell access. 就表示你已经配置好了SSH

SSH配置好了,下面配置你的本地Hexo
打开Hexo目录下的_config.yml
完成下列更改

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
    type: git
    repository: git@github.com:mrlsm/mrlsm.github.io.git
    branch: master

保存,cd到Hexo的根目录
依次执行下面的命令
第一次上传可能会让你输入git的用户名和密码

hexo clean
hexo d -g

到这里为止,你已经完成了自己博客的创建了

配置自己的网站(域名)

现在你就可以去选择一个自己的域名了(在这我是去阿里云买的域名)

首先去万网(http://wanwang.aliyun.com) 购买自己的域名。如下图选择一个自己喜欢的并且未注册的域名,新买的域名需要身份认证,大约一两天即可完成认证(不妨碍你选择已经注册的域名,谁让你有钱呢)
[图片上传中...(image-a9680f-1563505540443-1)]

然后去github,点击进去你创建的那个博客仓库点击create a new file here

名字为CNAME 内容为你自己申请的域名 例如:qq.com

把里面的CNAME文件拖到Hexo文件的Source目录下

这边配置好了以后,来到阿里云的域名管理器来解析你的域名,如下图所示:
[图片上传失败...(image-acfbaf-1563505540443)]

等待你的域名解析生效并通过身份认证吧。就可以在浏览器里面输入你自己的域名访问的博客了。

创建和发布文章

想要发布新的文章,首先创建文章

cd到Hexo文件夹

hexo new "文章标题"

你可以在Hexo->Source->_post目录下看到你新创建的那个文章,还有一个配套的文件夹,里面放这边博文的图片资源

使用支持MarkDown编辑器编写的打开新创建的文件,就可以写文章了,要根据MarkDown语法写出来的文章才会好看

Mac的markdown编辑器,推荐mou (http://25.io/mou/)

window下面的编辑器,推荐MarkDownPad (http://markdownpad.com/)

markdown具体语法参考(http://www.appinn.com/markdown/#code)

文章写好直接执行下面命令即可直接发布文章

hexo d -g

如果发布时候出现错误

ERROR Deployer not found: git

执行

npm install hexo-deployer-git --save

关于一些hexo命令可以查看官方文档进行配置 (https://hexo.io/zh-cn/docs/)

相关文章

  • github-hexo给你一个漂亮的主页

    假如你想自定义一个带有自己style的网站,那么跟我来一起学习一下吧! 我创建的这个博客(https://mrls...

  • 使用GitHub-Hexo搭建博客

    使用GitHub-Hexo搭建博客 1. 安装 Node.js 安装步骤略过... 打开 cmd 命令行,成功界面...

  • 一个漂亮的网站个人主页

    一、style.css : 二、index.html: 三、项目地址 CssDemoSite[https://gi...

  • 给你这个漂亮的女人

    明明好好的人生却被活成了残废,既舍不得离开又不忍心自己的选择。 她是一个不知道多少人追随的女孩子,美貌,说话也颇具...

  • 请给你的摄像头设置密码

    请给你的摄像头设置密码我看到一个live camera的网站是Insecam,据主页说是全球最大的在线监控安全摄像...

  • 一份意外的圣诞礼物

    下课, 一个孩子拿个漂亮的小盒进来, “老师,一个高三的小姐姐给你的。” 非常漂亮的小盒子,打开,不禁莞尔。 真是...

  • Sinatra学习 day 2

    Sinatra支持很多的模板引擎,erb,haml,slim等等,默认的是erb。我更爱haml,因为主页很漂亮,...

  • 2017-09-22

    今天做了漂亮的指甲,想给你看

  • 主页

    Hello Hello

  • 主页

    第一次玩简书

网友评论

    本文标题:github-hexo给你一个漂亮的主页

    本文链接:https://www.haomeiwen.com/subject/oldjlctx.html