wmzher

王明哲的博客


  • Home

  • Archives

易唐前端实习的笔记

Posted on 2019-06-13

我2017年在易唐实习6个月的笔记,主要是网页链接,里面包括了大量相关技术和知识,只有先Ctrl+C再Ctrl+V到浏览器按回车解开封印~

http://css.cuishifeng.cn/index.html
https://www.w3cplus.com/css3/ten-effects-with-css3-filter //滤镜

http://jquery.cuishifeng.cn/index.html

http://cnodejs.org/api

http://es6.ruanyifeng.com

http://vue.ydui.org/

https://vux.li/#/

https://fe-driver.github.io/vue-beauty/#/components/start

好用的UI组件:

http://element.eleme.io/
http://www.muse-ui.org/#/index
https://wangdahoo.github.io/vonic-documents/#/
https://www.youzanyun.com/zanui/vant#/zh-CN/component/intro
http://mint-ui.github.io/
https://vux.li/#/

安装node.js
node -v
npm -v
cd vue npm install -g vue-cli
vue init webpack xxx(项目名称)
// project name 项目名称 ->随便来
// project description 项目介绍 ->你开心就好
// author 项目作者 -》 你叫什么名字
// RUNTIME + COMPILER or RUNTIME ONLY 选第一个 就是直接 enter 回车
//vue-router 是否需要路由 回复 Y + enter(回车)
//estlint 全部选择 n
// tesst 全部选择 n
/*

  • cd 你的新初始化的目录
  • npm install 运行 npm install
  • npm run dev 以dev环境运行项目
  • localhost:8080 在浏览器打开 localhost:8080(127.0.0.1:8080)

引入axios
npm install axios –save

npm install -g cnpm –registry=https://registry.npm.taobao.org //中国镜像
npm uninstall cnpm -g //卸载cnpm
翻墙
https://www.speeds.vip/link/pqtxcYKQveSHj7aV?mu=0

https://www.w3cplus.com/javascript/how-to-find-the-sum-of-an-array-of-numbers.html

http://www.w3school.com.cn/jsref/jsref_obj_date.asp

cnpm install koa –save//安装koa

新建index.js 复制代码 运行node index.js

npm install koa-route //建路由

cnpm install koahubjs/koahub-cli -g//安装koahub

https://git-scm.com/downloads // 下载Git

koahub create mykoa(自命名) //建一个文件

cd mykoa npm install //

npm start//运行服务器 npm install –save mysql2 //链接数据库 npm install utility –save//加密 npm i koa-orm –save

https://github.com/koahubjs/koahub-cli//笔记链接

http://apizza.cc//模拟项目

https://github.com/koahubjs/koahub//koahub.js教程

https://github.com/koahubjs/koahub/blob/master/docs/README.md //koahub.js教程

name: ‘ xxxx’ ,// 链接名称(自定义)
modelPath:join(_dirname,’md’) , //model文件
db:’wobugaosuni’ , //数据库表名称
username:’root’, //数据库用户名
password:’root’,//数据库密码
dialect:’mysql’,//数据库类型
host:’127.0.0.1 ‘,//数据库服务器地址
port:3306,
pool:{
maxConnections:10, //最大链接设置
minConnections:0 , //最小链接设置
maxIdleTime:30000 //请求超时时间 单位毫秒
}

http://www.jb51.net/article/88781.htm
1、只要“&&”前面是false,无论“&&”后面是true还是false,结果都将返“&&”前面的值;
2、只要“&&”前面是true,无论“&&”后面是true还是false,结果都将返“&&”后面的值;
1、只要“||”前面为false,不管“||”后面是true还是false,都返回“||”后面的值。
2、只要“||”前面为true,不管“||”后面是true还是false,都返回“||”前面的值。

http://www.runoob.com/jsref/jsref-obj-array.html //JS数组对象方法
https://www.w3cplus.com/javascript/how-to-find-the-sum-of-an-array-of-numbers.html JavaScript学习笔记:数组求和方法

https://www.cnblogs.com/big-orange/p/6524197.html FIND、FINDINDEX、INDEXOF、LASTINDEX、INCLUDES 数组五种查询条件方法介绍

https://segmentfault.com/a/1190000005046496 ES6数组方法

https://itbilu.com/nodejs/npm/N1sdaHTzb.html //Sequelize 中文API文档

//12.18

https://github.com/iview/iview-admin//进入该网址点击clone and download解压这些文件至新建文件夹admin,cmd命令 CD 进入该文件 cnpm install 然后cnpm run dev

https://jingyan.baidu.com/article/6dad5075d1dc40a123e36ea3.html // 安装java JDK

http://cordova.apache.org/ //安装cordova
npm install -g cordova
新建文件目录
cordova create MyApp(自定义名字)
cd MyApp
cordova platform add android
cordova run android

cordova create xxx 创建一个xxx的cordova项目
cordova platform add android 添加一个安卓app项目设备给当前项目
cordova build android 构建安卓app
cordova run android 运行测试项目

1.建立cordova项目

2.修改vue项目当中的 config/index.js 里面的

build: {
// Template for index.html
index: path.resolve(__dirname, ‘D:/app/mobi/www/index.html’), //路径更改成 cordova项目下 www文件夹所在的目录

1
2
3
4
// Paths
assetsRoot: path.resolve(__dirname, 'D:/app/mobi/www'),//路径更改成 cordova项目下 www文件夹所在的目录
assetsSubDirectory: 'static',
assetsPublicPath: './', // 因为在cordova 里面目录会嵌套多一层 所以加一个相对路径

3.在vue项目当中 运行 npm run build ,这一步会把vue的项目打包到cordova项目中的www目录

  1. (如果做了 可以忽略)在cordova 项目当中 cordova platform add android
    5.执行 cordova build android
    6.执行 cordova run android

https://www.cnblogs.com/wujindong/p/5647101.html //打包
https://github.com/zjw1918/cordova-plugin-baidugeolocation //安装百度SDK

cmd命令进入myapp项目
cordova build android –release

keytool -genkey -v -keystore release-key.keystore -alias cordova-demo -keyalg RSA -keysize 2048 -validity 10000 设置密码123456和输入信息生成release-key.keystore cordova-demo(是别名)

keytool -list -v -keystore release-key.keystore //获取SHA1 百度或高德开发平台控制台创建项目复制SHA1代码 在AndroidManifest.xml获取package(包名)

在myapp项目根目录里新建build.json 复制代码
{
“android”: {
“release”: {
“keystore”: “release-key.keystore”,
“alias”: “cordova-demo”,
“storePassword”: “123456”,
“password”: “123456”
}
}
}

jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore release-key.keystore platforms\android\build\outputs\apk\android-release-unsigned.apk cordova-demo(别名)//(apk路径)签名

cordova plugin add cordova-plugin-baidugeolocation –variable ANDROID_KEY=eDSogagWFRL8Svb*Y4VDH8eMSPb8(YOUR KEY API) //安装百度SDK

zipalign -v 4 platforms\android\build\outputs\apk\android-release-unsigned.apk android-apk\cordova-demo.apk //正式将release版本apk打包

http://cordova.apache.org/docs/en/latest/ //cordova官方插件

http://cordova.axuer.com/docs/zh-cn/latest/ //cordova中文文档官方插件

https://github.com/ //github开源插件

https://github.com/node-modules/utility //服务端加密

https://www.jianshu.com/p/81fdd0a1e7d4 //正则表达式
http://deerchao.net/tutorials/regex/regex.htm 30分钟入门
http://tools.jb51.net/regex/create_reg //在线生成工具
http://www.jb51.net/article/77687.htm //65条最常用正则表达式

http://blog.csdn.net/h5_queenstyle12/article/details/75386359 //vuex
https://vuex.vuejs.org/zh-cn/actions.html //官网

https://segmentfault.com/ls/1650000011074057#firstItem //vue视频

https://socket.io/
https://github.com/MetinSeylan/Vue-Socket.io //安装socket(客户端) npm i vue-socket.io –save

https://github.com/ambelovsky/koa-socket-2 新建一个目录koasocket(服务端) npm i koa –save npm i -S koa-socket-2 启动: node index

https://segmentfault.com/a/1190000010952001 //AJAX 和 Socket.IO到底选哪个?

http://nodejs.cn/api

http://eggjs.org/zh-cn/intro/quickstart.html

https://juejin.im/

https://www.jianshu.com/ //vue资源

https://juejin.im/post/58c9d5fb1b69e6006b686bce //(冒泡排序)JS中可能用得到的全部的排序算法

https://angular.io/
安装angular
npm install -g @angular/cli
创建新项目
ng new my-app
启动开发服务器
cd my-app
ng serve –open

https://www.jianshu.com/p/9af9f203e0b1 //简书ng教程

https://electronjs.org/ //构建桌面应用

https://www.gitbook.com/book/xcatliu/typescript-tutorial/details //typescript 教程

https://shimo.im/docs/H9f9H9mbeAc2jVkE/ 「我的angular的文档集」

https://cipchk.github.io/ngx-weui/#/docs/components/actionsheet // wxui
https://github.com/cipchk/ngx-weui 引入css:

https://ionicframework.com/getting-started/ //ionic

http://weex.apache.org/cn/guide/ //weex

http://blog.csdn.net/h5_queenstyle12/article/details/75386359 (sth error) //vuex
http://blog.csdn.net/embrace924/article/details/78272822 //vuex

https://filezilla-project.org/ // fz下载

http://www.souho.net/forum.php //搜虎源码下载

https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000 js全栈

qiniu
https://www.jianshu.com/p/9681467d58e7 jQuery

https://github.com/soldair/node-qrcode //二维码插件 npm install –save qrcode

doc.webpack-china.org // webpack打包

https://github.com/bda-research/node-crawler // 爬虫

https://github.com/node-schedule/node-schedule // 轮寻

https://segmentfault.com/q/1010000009407919/a-1020000009408083 axios上传文件

https://www.jianshu.com/p/e87dd6aa47d3 //jsonp

https://github.com/apache/cordova-plugin-file-transfer#backwards-compatibility-notes //文件上传

http://www.jb51.net/article/76695.htm
https://segmentfault.com/q/1010000008906623/a-1020000008909097 //electron全屏

http://blog.csdn.net/hsd2012/article/details/51279472 //mongoDB入门教程

启晴村赏晴楼
https://blog.csdn.net/qq_35154427/article/details/88536188 //以上内容放在csdn

在青岛思齐软件记录的笔记

Posted on 2019-06-05

来广州有15个月了,全部分享做前端所学的知识记录。(主要是百度解决问题的所有网址,以及操作代码)

1.mongodb

https://www.mongodb.org/dl/linux/x86_64 //mongodb下载Linux
https://www.jianshu.com/p/0eafa1e68995 ///安装MongoDB
https://www.cnblogs.com/Lovebugs/p/8606000.html ///安装MongoDB

安装mongodb后运行命令:

1
mongod //运行mongodb数据库
1
mongo //执行操作
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
db.createUser( { "user" : "cms",
"pwd": "123456",
"customData" : { employeeId: 123456 },
"roles" : [ ] },
{ w: "majority" , wtimeout: 5000 })//创建一个用户
> use admin//登录使用admin数据库
switched to db admin  
>db.createUser(
{
user: "root",
pwd: "rootpwd",
roles: [ {role:"root", db:"admin"} ]
}
)//创建admin管理库的用户
> use admin #1数据库切换至admin管理库
switched to db admin
> db.auth('root', 'rootpwd') #2验证root用户
1  
> use mydb #3切换至业务库 在该库创建访问该库的用户
>db.createUser( #4 创建用户
{
user: "mydbDBA",
pwd: "123321",
roles: [ {role:"dbOwner", db:"mydb"} ]
}
)
db.createUser(
{
user: "wmz",
pwd: "wmz",
roles: [ {role:"dbOwner", db:"test"} ]
}
)

adminmongo管理mongodb的工具

https://segmentfault.com/a/1190000015752836 //安装adminMongo
adminmongo操作(linux&windows命令):

1
2
3
4
5
npm install -g admin-mongo //两个操作系统都用的安装命令
linux cd /usr/local/node/node-v6.11.2-linux-x64/lib/node_modules/admin-mongo
windows cmd命令行进入C:\Users\wmz\AppData\Roaming\npm\node_modules\admin-mongo //windows的adminmongo执行位置
npm start //运行

127.0.0.1:1234 //进入界面
mongodb://127.0.0.1:27017 //进入数据库操作界面

mongodb用到的命令

https://www.cnblogs.com/wpjzh/p/5999363.html //MongoDB基本命令

node框架里有操作mongodb数据库的插件mongoose,安装后可以根据文档进行CURD(增删查改)的操作

https://www.jianshu.com/p/2f54b90efe15 //mongoose命令

http://blog.csdn.net/qq_36453032/article/details/72875563//连表查询

导出数据表

1
2
3
cd qq.csv所在位置
iconv -f gbk -t UTF-8 qq.csv > qq1.csv
mongoimport -d sbuy -c commoditys --type csv --headerline --file qq1.csv

//nodejs将Excel中的数据导入MongoDB
https://alfierichou.github.io/2017/12/13/nodejs%E5%B0%86Excel%E4%B8%AD%E7%9A%84%E6%95%B0%E6%8D%AE%E5%AF%BC%E5%85%A5MongoDB/
mongoexport -h 47.254.42.191 -p 27017 -d sbuy -c admins–type=csv -f “aname,telephone,idcard” –out F:\aaa.csv

2.express

express框架是比较成熟多人用的node框架,学习这个框架主要是启动文件配置,路由,控制器,ORM框架(操作数据库的中间件如mongodb的mongoose,mysql的Sequelize),其他的node框架也类似分为这些知识。

1
2
3
4
5
6
7
8
9
10
11
12
//允许跨域 app.js
app.all('*',function (req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', 'Content-Type,Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE,OPTIONS');
if (req.method == 'OPTIONS') {
res.send(200);
}
else {
next();
}
});

3.electron

electron使用也就知道它是一个做桌面应用的框架,现在使用github开源的“想学吗“这个写文章的桌面应用写股市的日记和读书心得,可以用,给它一个赞!

1
2
3
4
5
6
7
8
9
10
11
12
electron-packager . firsteletron --win --out ../firsteleApp --arch=x64 --version=0.0.1 --electron-version=1.4.13//打包
//桌面最大化
const {app, globalShortcut, BrowserWindow} = require('electron')
let mainWindow;
app.on('ready', () => {
mainWindow = new BrowserWindow({width: 800, height: 600})
mainWindow.setFullScreen(true);
globalShortcut.register('ESC', () => {
mainWindow.setFullScreen(false);
})
})

http://blog.csdn.net/j_bleach/article/details/78513282// vue项目生成桌面应用

4.vue

vue用了快两年了,真的容易上手文档易懂,学习成本不高,这样和其他程序员没有差距(别人也容易会),能够使用这个框架的技术含金量不大,面试问的也是百度得到的model的实现原理。

https://blog.csdn.net/qq_37026273/article/details/80192962//vue-cli npm run build打包图片路径问题

https://www.cnblogs.com/zlbrother/p/7823380.html //vue-cli自适应布局

https://blog.csdn.net/hjh15827475896/article/details/78207066 //vue插件

https://blog.csdn.net/qq_39725309/article/details/81558332 //@vue/cli 现在使用3.0版本

http://www.cnblogs.com/zyulike/p/10209562.html // vue||egg-socket.io

vue-router路由技巧

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<route-link :to="{name:'music',query:{id=6}}"></route-link>//vue路由标签跳转
//router.js
嵌套路由:{
name:music,
path:'/music',
component:Music,
children:[
{name:'music_oumei',path:'oumei',component:Oumei},// /oumei是绝对路径,把/music替换/oumei才切换路由,oumei是相对路径,输入/music/oumei切换路由
{name:'music_guochan',path:'guochan',component:Guochan},
]
}
music组件里加
<route-link :to="{name:'music_oumei'}">欧美音乐</route-link>
<route-link :to="{name:'music_guochan'}">国产音乐</route-link>
<router-view></router-view>

https://www.cnblogs.com/XHappyness/p/7919610.html //vue使用axios时在IE浏览器promise错误 :1.  npm install babel-polyfill –save  2.  在main.ts中 import “babel-polyfill”

https://blog.csdn.net/qq_36911154/article/details/78152538 //响应式布局

https://webgradients.com/ //渐变色

5.think.js

http://www.uedsc.com/322603.html //thinkjs
https://www.jianshu.com/p/7481d35a1dd6 //thinkjs的一些方法

cmswing(相关脚手架)

https://newsn.net/say/cmswing-install.html //cmswing安装

6.CSS

1
2
3
4
5
.nav::after{content:'';display:block;clear:both;} //清除浮动流
p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} //单行文字溢出
p{width:300px;height:30px;line-height:15;overflow:hidden;} //多行文字溢出
方案1{text-indent:200px;white-space:nowrap;overflow-hidden;} 方案2{width:190px;height:0px;padding-top:90px;overflow:hidden;bgi:url(...);bgsize:190px 90px;/} //css因网速慢而不加载样式情况操作 p标签不能套块标签 a标签不能套a标签
height: calc(100vh - 100px); //css3元素等于屏幕高度

7.react

react在动脑学院的高级前端课程学了一课程,还需要项目练,以后会更好!

https://segmentfault.com/a/1190000012921279 //react入门 import * as xxx from xxx //对没有export 的xxx文件 以as别名xxx使用

linux

1
2
3
4
ps -ef|grep node //查看node进程 node可改为你相查的进程
netstat -anp|grep 80 //查看使用80端口的进程,80改为你想查的端口都行
如果想结束掉express再启动,则 使用kill 0000(进程号pid)命令把进程杀掉
kill XXX 有 node app.js 的一行数字

niginx

https://blog.csdn.net/yougoule/article/details/78186138 //nginx
https://www.cnblogs.com/Miss-mickey/p/6734831.html //反向代理配置

1
cd /usr/local/nginx/sbin 执行./nginx -s reload

AB压力测试

https://blog.csdn.net/qq_26525215/article/details/79182674 //AB测试
ab -n 100 -c 10 -v 4 -p postdata.txt -T application/x-www-form-urlencoded “http://47.254.42.191:8080/admin/booklist“
ab -n 100 -c 10 -p postdata.txt http://mianmianshi.com:8088/index.html 请求100 并发10
https://blog.csdn.net/u010889390/article/details/50561293

https://www.cnblogs.com/apolloren/p/8832868.html //phpstudy linux安装

宝塔

宝塔是个很好用的软件集合(专业名称一下忘了!#.#),非常省事,对于linux服务器操作nginx,阿帕奇,数据库,拍黄片,上传文件统统能搞定!!!

http://www.bt.cn/btcode.html //宝塔安装

redis

https://blog.csdn.net/u012343297/article/details/78839063 //windows安装Redis
https://www.cnblogs.com/limit1/p/9045183.html //linux安装Redis

vpn

https://github.com/allenking1028/ss/issues/1 //服务器翻墙

下面连接是要翻墙看,临时可以用蓝灯免费的!!!

https://youtu.be/xrbviAfagrU ///视频教程

测速度(100以内): ipip.net 工具>traceRoute

一些命令

systemctl restart nginx.service
systemctl status httpd.service
systemctl start mongod.service
查看mongo安装位置 whereis mongod
查看修改配置文件 : vim /etc/mongod.conf
3.启动MongoDB
启动mongodb :systemctl start mongod.service
停止mongodb :systemctl stop mongod.service

C\

C#做了两个窗体应用程序,是工程机控制led灯亮灭,存放架开关的项目,很多问题都是直接百度,这个事情我觉得是黑历史^()^·

sqlite

https://blog.csdn.net/weixin_41656968/article/details/80338626 //sqlite
https://blog.csdn.net/a03910/article/details/82856194 //链接sqlite数据库
https://www.cnblogs.com/gates/p/3936974.html //数据库语句

杂项

https://blog.csdn.net/xjc_gx/article/details/38228959 //读卡

http://www.win7zhijia.cn/jiaocheng/win7_14019.html //win7直接进桌面
https://blog.csdn.net/zhouyingge1104/article/details/74853193 //开机自启

https://www.cnblogs.com/e-cat/p/9474646.html //语音

JavaScript

JS现在是很流行的编程语言,能搞web前端开发,后台服务(node.js),做游戏(cocos),webgl(three.js),学好这门语言走遍天下都不怕(划重点啦)!

es6

http://es6.ruanyifeng.com/#docs/promise //阮大神的es6入门,promise是异步请求的原理(面试会问哟)

正则

http://www.cnblogs.com/xinwusuo/p/5948908.html //正则

1
let reg = /^.*4.*$/; //数字选出有4的正则

node.js

npm install font-spider -g //安装根据网页的文字生成对应 的字体

three.js

three.js是网页渲染3D图形的框架,webgl现在好多人用,学习遇到问题加这个群585582495多问,虽然答案会沉没在吹水的文字里,但问了总比没问好~

https://www.cnblogs.com/zhnblog/archive/2017/07/12/7153781.html //three

https://www.jianshu.com/p/906072e60197 //加载模型

egg.js

egg.js是阿里的基于koa的插件齐全并且很受欢迎的node框架,要学就先学这个!

http://www.cnblogs.com/zyulike/p/10209562.html // vue||egg-socket.io

杂项

bitbug.net //ico生成网站

–disable-web-security –user-data-dir //本地运行解决跨域

https://blog.csdn.net/wfg18801733667/article/details/52159830 //优化网页加载速度

https://www.cnblogs.com/lml2017/p/9953429.html //flexible px => rem

https://segmentfault.com/a/1190000011145364 //跨域

PHP

php是因为有个项目是有关*企秀的源码,后台是php写的,项目维护需要接触了一些

https://newsn.net/say/centos-php72-yum.html //安装php

微信开发

微信开发就跟着文档做就ok了,孰能生巧这是真理,刚开始不懂很正常解决方案就是多看!!!

https://segmentfault.com/a/1190000011540768 //微信支付1

https://segmentfault.com/a/1190000011556584 //微信支付2
https://blog.csdn.net/wclimb/article/details/79327988 //node.js微信支付

https://www.cnblogs.com/deng-cc/p/7183239.html //微信支付方法

https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=9_1 //微信小程序支付
https://www.jianshu.com/p/72f5c1e3f8a5 //小程序支付

博客

现在使用的是很瘦欢饮的博客框架hexo

https://blog.csdn.net/wh211212/article/details/75004199 //GitHub博客教程
https://www.bilibili.com/video/av12931967 //个人博客hexo视频教程

https://liuliansp.github.io/ //刘麟的博客(搞爬虫)

firstboke

Posted on 2019-06-02

hello world哈哈哈哈
this is my first blog!

对对对

寺庙

1
console.log('this is 我的公众号!');

$$
a^2+b^2=c^2
$$

[我的github(喜欢你的小星星:)]:

https://github.com/wmzher/wmzher.github.io

[^]:

发挂号费的

  • dfdfg
  • dsfasa

丰盛的国防生

沙发上

发士大夫撒

Hello World

Posted on 2019-06-02

本版本仅适用于Win环境
本文关键字: Hexo绿色版,Hexo便携版,Hexo配置,Hexo,U盘

Hexo是一个快速、简洁且高效的博客框架,支持 GitHub Flavored Markdown 的所有功能;具有超快生成速度,让上百个页面在几秒内瞬间完成渲染;还拥有各式各样的插件等等。

但是就像很多教程里面写的那样,搭建 Hexo 本地环境,需要安装 Node.js、Git 以及使用 npm 进行安装和配置。这对于毫无经验的新手来说,是一个很大的挑战。同时,由于这些环境的存在,导致如果需要更换计算机的时候,重新安装配置一个新的Hexo环境,又得花费一些功夫。

所以呢,锵锵,我们整合了一个 Hexo 便携版,来简化本地环境的部署。

####版本介绍
那么所谓的便携版到底是什么?便携版就是将 Hexo 本地环境所需要的各种依赖环境的整合到一起,做成的不需要安装的版本。

本便携版(Release 1.0.0)所包含的软件如下:

  • Git: 2.7.4
  • Nodejs: 6.10.1
  • Npm: 4.4.1
  • Hexo: 3.2.2

为了便携的需要,不能配置固定的环境变量,所以除此之外还有相应的批处理文件,下文将详细介绍。

####从零开始,1分钟搭建Hexo写作环境
说了这么多,我们这就开始教你如何在1分钟内,从零开始搭建Hexo写作环境!

#####1 注册一个Github帐号

1.1 进入Github,并在右边的3个框框中分别填写 用户名、邮箱地址、账户密码,并点击 Sign up for Github;

图1.1.1

1.2 进入欢迎页面后,点击Finish sign up;

图1.2.1

1.3 进入到这一步之后(图1.3.1),先别记着点任何东西,查看你的邮箱,应该会收到如下的邮件(图1.3.2),确认你的邮件。否则,你会看到错误页面(图1.3.3)。query完毕之后在图1.3.1所示的页面,点击+ New repository;

图1.3.1

图1.3.2

图1.3.3

1.4 请在红框中的 Repository name 里面输入 用户名.github.io ( 用户名 就是你刚刚 步骤1.1 中注册的用户名),然后点击 Create repository;

图1.4.1

1.5 至此,Github网页注册的部分完毕

####2 下载HEXO Portable

2.1 访问我们的 HEXO Portable 页面,或者 Github仓库 下载最新的便携版;

2.2 双击得到的自解压文件,解压到你需要安装博客的地方,可以选择硬盘或者U盘;

####3 配置你的环境

3.1 在你的博客的文件夹,你会发现很多批处理文件,我先介绍下各个文件的用途:

  • 配置基本信息 >> 配置博客的基本环境
  • 配置Github部署 >> 配置博客的部署
  • 启动命令行 >> 启动带环境变量的Git-Bash,否则无法使用node、npm、git等命令
  • 新建文章 >> 新建一篇文章
  • 渲染并本地测试 >> 生成并本地预览
  • 渲染并部署 >> 生成并部署到GitHub
  • 重置配置文件 >> 重置_config.yml

3.2 我们继续进行环境配置,双击配置基本信息并按顺序输入以下信息:

  • 主标题:顾名思义
  • 副标题:顾名思义
  • 描述:顾名思义
  • 作者:顾名思义
  • 网站地址:填写 用户名.github.io (此处的用户名为步骤1.1中填写的用户名)
    如果您已经购买了域名,可以参看相关的文章!

3.3 双击配置Github部署并按顺序输入以下信息:

  • Github的用户名:此处的用户名为步骤1.1中填写的用户名
  • Github注册邮箱:此处的注册邮箱为步骤1.1中填写的注册邮箱

3.4 输入完毕之后,会进行测试部署,等待屏幕提示下面将进行部署测试,稍后将有一个openssh的对话框出现,请输入你的github用户密码。的时候,按回车继续;(此处的用户密码为步骤1.1中填写的用户密码)

3.5 然后继续等待,此时屏幕会出现n多行,耐心等待即可;

3.6 等待屏幕提示请访问 https://用户名.github.io 查看是否部署成功!的时候,在浏览器中输入https://用户名.github.io ,理论上可以看到你的Hexo站点!(此处的用户名为步骤1.1中填写的用户名)

3.7 至此,你的Hexo环境就配置完成了,这样你的这个Hexo博客文件夹无论移动到哪一台电脑,都能通过启动命令行出现的bash命令行,或者其余便捷的批处理文件比如新建文章、渲染并本地测试、渲染并部署进行相应的操作。

3.8 如果你在配置中出错,可以运行重置配置文件后,再重复3.1~3.6步骤

####4 开始享受纯粹的Hexo写作吧!

####5 备注

  • 本便携版以及本文均使用 CC BY-NC-SA 4.0协议;
  • 本文所有权归 QistChan & Bitmoe Inc. 所有;
  • 本便携版由 Bitmoe Inc. 维护并提供技术支持;
  • 需要技术支持可以在Github仓库 提交Issues;
  • Written with StackEdit.

wmzher

全栈开发

4 posts
© 2019 wmzher
Powered by Hexo
|
Theme — NexT.Muse v5.1.4