前言
首先,欢迎各位来参观我的博客: Joahcy's Blog.搭建博客的目的呢?一方面总结自己学习各种技术过程中踩过的坑以及心得,另一方面希望通过博客这个平台与大家一起交流,共同进步.其实博客搭建完成已有一段时间了,但是之后一直没有时间写这个教程,今天天清气爽,闲来无事正好有时间来完成这个博文.废话不多说,下面就让我们开始搭建属于自己的博客,保证小白白都能看懂,开始吧!
如果你还不知道你为什么要做一个博客，推荐你看：<<我为什么写博客>>
此时风景正好
关于GitHub
1.Github的优点
- GitHub官网
- GitHub是基于git实现的代码托管.git可能是目前最好用的版本控制系统了,非常受欢迎.
- GitHub可以免费使用,并且快速稳定.
- Github上面的世界很精彩,用久了你的眼界会开阔很多.
2.什么是Github Pages?
- Github Pages可以被认为是用户编写的,托管在github上的静态网页.
3.为什么要使用Github Pages?
- 可以绑定你的域名(但暂时貌似只能绑定一个).
- 简单快捷,使用Github Pages可以为你提供一个免费的服务器,免去了自己搭建服务器和写数据库的麻烦.
关于Hexo
1.Hexo是什么?
- Hexo官网
- 正如官网所介绍的: A fast, simple & powerful blog framework.Hexo 是一个快速、简洁且高效的博客框架。
2.它有什么优点?
- 速度快: 几十篇博文,只需数秒就可以生成静态网页
- 一键部署: 只需一条命令就可以完成部署
- 支持MarkDown语法
- 有丰富的插件库
想要更多了解,还需各位自行上官网或Google.
安装和使用Git
-
安装
-
怎么打开和使用git呢?
右击鼠标点击GitBash
命令行使用git
-
Git基础操作
GIt基础操作
-
Git教程: ProGit(中文版) 廖雪峰GIt教程
安装nodejs
- Windows
根据自己系统版本在官网下载安装即可. - Linux
apt install nodejs
安装淘宝cnpm
- npm 速度会有点慢,所以可以使用淘宝的cnpm代替npm,用法和npm几乎一样.
- 安装:
npm install -g cnpm --registry=https://registry.npm.taobao.org- Windows 桌面右击鼠标,点击Git Bash Here,进入命令行,执行以上命令
- Linux 直接在命令行执行以上命令
Hexo
- 安装
cnpm install -g hexo-cli
npm install hexo --save
- 创建博客文件夹(比如:E:/blog/joahcy或/home/blog/joahcy)并初始化配置
- Windows 进入博客文件夹(如我的是joahcy文件夹),右击鼠标,点击Git Bash Here,进入命令行,执行以下操作
- Linux 进入博客文件夹,执行以下操作
hexo init npm install
初始化并且依赖安装完成后,博客目录大概如下:
初始化后目录
- 安装Hexo插件,保证后面操作不出错,在博客文件夹执行以下操作
npm install hexo-generator-index --save
npm install hexo-generator-archive --save
npm install hexo-generator-category --save
npm install hexo-generator-tag --save
npm install hexo-server --save
npm install hexo-deployer-git --save
npm install hexo-deployer-heroku --save
npm install hexo-deployer-rsync --save
npm install hexo-deployer-openshift --save
npm install hexo-renderer-marked@0.2 --save
npm install hexo-renderer-stylus@0.2 --save
npm install hexo-generator-feed@1 --save
npm install hexo-generator-sitemap@1 --save
- 生成静态文件
hexo g - 测试,本地查看效果
- 执行
hexo s - 浏览器访问: http://localhost:4000 测试是否成功(端口默认4000)
博客雏形
- 执行
将博客部署到Github上
-
创建github账户,Github首页点击右上角Sign up进行注册
-
创建项目代码库
注册完成后,点击New repository. 注意名字一定是 yourname.github.io,如图所示:
创建仓库
-
配置SSH秘钥
配置Github的SSH密钥可以让本地git项目与远程的github建立联系,让我们在本地写了代码之后直接通过git操作就可以实现本地代码库与Github代码库同步.操作如下：
1.查看本机用户目录是否存在SSH秘
2.若不存在则创建新的秘钥,需填写自己的Github注册时的邮箱
ssh-keygen -t rsa -C "your_email@example.com"
相关提示:Generating public/private rsa key pair. Enter file in which to save the key (/c/Users/you/.ssh/id_rsa): [Press enter]
直接回车,直接回车,则将密钥按默认文件进行存储.
然后根据提示,输入密码和确认密码(其实可以不用密码,就是到输密码的地方,都直接回车,所以后面每次push就只需回车就可以).相关提示如下：
Enter passphrase (empty for no passphrase): [Type a passphrase]
Enter same passphrase again: [Type passphrase again]
输入完成之后，屏幕会显示如下信息：
Your identification has been saved in /c/Users/you/.ssh/id_rsa.
Your public key has been saved in /c/Users/you/.ssh/id_rsa.pub.
The key fingerprint is:
01:0f:f4:3b:ca:85:d6:17:a1:7d:f0:68:9d:f0:a2:db your_email@example.com
3.在GitHub账户中添加你的公钥,将公钥文件id_rsa.pub的内容复制
4.登录Github,右上角进入settings,然后左侧点击SSH and GPG keys,接着点击New SSH key,如图:
New SSH key
5.测试
可以输入下面的命令，看看设置是否成功
ssh -T git@github.com如果出现下面的信息,则表示设置成功:
Hi joahcy! You've successfully authenticated, but GitHub does not provide shell access.
6.配置用户信息
git config --global user.name "joahcy"//用户名 git config --global user.email "joahcy915@gmail.com"//填写自己的邮箱
至此秘钥配置完成,本机已与Github建立了联系.
-
修改博客目录(E:/blog/joahcy)下的_config.yml配置文件 (注意: 配置时,每个键值对之间都要加个空格)
1.根据个人情况修改Site,Url和Pagination部分
2.修改Deploy部分
登录Github打开项目username.github.io
打开项目
复制项目HTTPS路径
复制项目HTTPS路径
找到关键字deploy,进行如图修改,repository为刚才复制的路径
修改deploy
-
部署
进入博客目录(E:/blog/joahcy),执行以下命令.hexo g hexo d
或者直接执行hexo g -d
执行完之后会让你输入github的账号和密码,输入完后就可以登录我们自己的部署在Github Pages服务器上的博客了.对应的地址是 username.github.io(我的是：joahcy.github.io)
如果觉得输入用户名和密码麻烦,可以修改deploy部分的repository,如图:
修改为SSH连接
修改
这样部署的时候就不用输入用户名和密码,是不是方便多了?
浏览器访问
通过浏览器访问自己的博客,地址为http://yourname.github.io
博客雏形
根据个人喜好修改博客主题
- 1.在hexo官网找到自己喜欢的主题,然后克隆下来. (博客的主题都保存在博客根目录的themes文件夹下)
如克隆Next主题,进入博客目录,执行一下命令:
git clone https://github.com/iissnan/hexo-theme-next themes/next - 2.找到全局_config.yml文件的theme关键字,改为next.(注:值是themes文件夹下主题文件夹的名字)
- 3.详细修改主题样式配置
修改主题目录下的_config.yml文件,在这就不详细解释了,可以找相应的教程来修改(注:简洁大方next主题有很多教程,当然也有其他的主题)
通过域名访问博客
-
通过域名商购买自己喜欢的的域名(万网,西部数码,GoDaddy等等),我用的万网.
搜索
搜索
找到可注册的域名
找到可注册的域名
如果用的万网,进入个人中心,点击域名
进入个人中心
点击域名后面的管理
点击管理
修改DNS 为f1gns1.dnspod.net 和 f1gns2.dnspod.net
修改DNS
- 在DNSPod官网注册账号,并添加DNS解析
进入域名解析
进入域名解析
添加域名
添加域名
获取博客IP地址: CMD 里面ping yourname.github.io得到IP
点击域名进去,添加两条记录,IP为刚才ping 得的ip
添加记录
- 在博客source目录下添加CNAME文件,内容为你的域名,然后再一次部署
hexo g -d - 耐心等待......大约十几分钟就可以通过域名来访问了
写博客
- 用hexo发表新文章
hexo n "文章标题"
会在项目 source/_posts 中生成 对应的.md文件,用编辑器打开编写即可。
当然,也可以直接在source/_posts中新建一个md文件,写完后,推送到服务器上,执行以下命令即可在我们的站点看到新的文章.
hexo g -d - 用Markdown写文章
- 什么是markdown?
Markdown 是一种轻量级的「标记语言」,它的优点很多,目前也被越来越多的写作爱好者,撰稿者广泛使用.看到这里请不要被「标记」,「语言」所迷惑,Markdown 的语法十分简单.常用的标记符号也不超过十个,这种相对于更为复杂的HTML 标记语言来说,Markdown可谓是十分轻量的,学习成本也不需要太多,且一旦熟悉这种语法规则,会有一劳永逸的效果. - markdown有以下优点:
- 专注你的文字内容而不是排版样式.
- 轻松的导出 HTML、PDF 和本身的 .md 文件.
- 纯文本内容,兼容所有的文本编辑器与字处理软件.
- 可读,直观.适合所有人的写作语言.
- 用什么工具写?
- Windows : MarkdownPad2
- Mac :用Mou 或 Atom
- Web端: 用简书
- 更多资料可以查看: 认识与入门 Markdown
- 什么是markdown?
后记
至此,博客基本搭建完成.搭建了2天很累,但是还是有一定的成就感的.以后的路还很长,好好写文章提高自己吧.
网友评论