学大前端
前端开发知识分享!
今天写这篇文章真的不容易,希望粉丝们多多分享!给我动力
来看下网站效果图:
嘿嘿~不错吧。挺高大上的
接下来从零开始搭建吧!
滴滴~~装逼时刻开始啦!
1、安装Git bash
先把软件下载到本地,双击exe文件,默认勾选一路next就可以了。(注:我系统是32位,工具获取在微信回复:git)
在桌面右键点击打开Git Bash Here
输入git version显示版本号表示安装正确!如果没安装成功这就需要你的聪明才智去解决问题了。
2、安装nodeJS
先去nodeJS官网去下载msi文件,下载好后双击进行安装。这里不截图了,反正也是一路next。如果遇到问题,就发挥你的聪明才智去解决问题吧。
安装完成后,在Git Bash Here,输入node -v显示版本号表示安装正确!
3、安装hexo
看到这么多安装,千万不要紧张,小哥哥小姐姐们一定要稳住,别怕,因为后面的东西都是在git bash中用npm工具安装就好了。
先创建一个文件夹(用来存放所有网站的东西),然后打开该文件夹。在文件夹右键点击Git Bash Here
接下来输入命令npm install -g hexo-cli记得回车。注意:感觉没动静,不是卡死了,是在下载中,需要一点时间!来看我的操作
接下来输入hexo init运行完后文件夹里有很多文件啦!看我操作的截图
跟我不一样的说明你操作失败了!
文件夹里的文件解释一下:
node_modules:是依赖包
public:存放的是生成的页面
scaffolds:命令生成文章等的模板
source:用命令创建的各种文章
themes:主题
_config.yml:整个博客的配置
db.json:source解析所得到的
package.json:项目所需模块项目的配置信息
做好这些前置工作之后接下来的就是各种配配配置了。
4、注册GitHub网站账号
进入github.com 官网点击Sign up ,英文看不懂就网页一键翻译,这里大家自己发挥吧。不做过多讲解
注册好后登陆进去,创建一个仓库,如图所示:
最后点击:create repository
点击后就是这样的啦!
点击界面右侧的Settings,你将会打开这个库的setting页面,向下拖动,直到看见GitHub Pages,如图:
点击Automatic page generator,Github将会自动替你创建出一个gh-pages的页面。
5、本地仓库绑定
接下来回到git bash中操作啦!需要做账户绑定操作才能连接刚刚我们创建的仓库。
小哥哥小姐姐们开始敲命令了,稳住哦,git bash我不提供操作图了,请按照我的步骤来:
创建 SSH Key
$ ssh-keygen -t rsa -C “这里输入github注册邮箱号”
一路回车,使用默认值即可
登陆GitHub,打开“Settings”->“SSH and GPG Keys”,“New SSH Key”操作
Title任意,在Key文本框里复制id_rsa.pub文件里的内容。注:文件的内容默认是在本地电脑 中,用记事本打开。
点“Add SSH Key”,注:我添加过了,所以显示New SSH key
验证是否成功,在git bash中输入:
如果出现以下错误解决
错误提示一:ssh_exchange_identification: read: Connection reset by peer // SSH使用HTTP代理来登录服务器
第一次使用需要设置用户名和email
$ git config –global user.name “这里输入github用户名”
$ git config –global user.email “这里输入github注册邮箱号”
6、部署项目
到网站文件夹中用编辑器打开_config.yml文件,l拉到最后添加以下代码,网址别跟我一样,写你自己的
有人问:网址在哪里找,看下图
保存好后,回到git bash中,分别执行以下命令:
第一条命令:hexo clean
第二条命令:hexo generate
第二条命令:hexo server
来,现在用你的浏览器输入:http://localhost:4000
接着你就可以遇见天使的微笑了~
7、网站文件上传github仓库
在git bash中摁 Ctrl+C 先结束掉上一次开启的服务。
先要安装一个服务,在git bash 输入:npm install hexo-deployer-git --save
接下来开始依次执行以下命令:
第一条命令:hexo clean
第二条命令:hexo g
第二条命令:hexo d
在浏览器中输入https://xdqianduan.github.io就可以看到你刚才做的网站啦!
领取专属 10元无门槛券
私享最新 技术干货