文以一次尋求免費(fèi)上傳本地Html方法的過程為例，總結(jié)從網(wǎng)絡(luò)獲取信息的經(jīng)驗(yàn)。

最近遇到過這類問題：

• 怎么下載某破解版軟件？
• 怎么在B站就著彈幕看進(jìn)擊的巨人？
• 怎么免于購買服務(wù)器和域名而直接上傳自己的本地頁面？

我覺得長輩與年輕人解決問題的方法是各有側(cè)重的，長輩們擅長通過已有的閱歷和人脈解決問題，而年輕人的優(yōu)勢在于愿意自己發(fā)掘新信息。

也許我們不是為了增長知識(shí)，只是想找些樂子，但潛移默化中這種發(fā)掘信息的能力也將成為我們的寶貴財(cái)富。

本文立足于解決那些與自己專業(yè)不對(duì)口的、無法一次性搜索到答案的問題，這類問題有以下特征：

1. 以前沒有接觸過，這幾乎是一個(gè)全新的、從零開始探索的問題
2. 也許內(nèi)行人手到擒來，但自己作為外行人一頭霧水
3. 為達(dá)成目的需要嘗試很多步驟，很容易跑偏并鉆進(jìn)牛角尖

一、篩與選

達(dá)成一個(gè)特定目的或許有很多方案，需要做的第一步：

列出這些方案，通過主觀判斷去掉不可行的，深入開展自認(rèn)為可行的。

（一）篩

事情是這樣的，幾個(gè)朋友參加某考試需要背誦大量例題，我想幫他們做一個(gè)“單詞卡”式的復(fù)習(xí)文檔。關(guān)鍵功能是可以自由打開或關(guān)閉答案，類似在單詞卡的正反面分別記錄單詞與釋義。思考后，我想到了兩個(gè)方案：

1. 利用已有的手機(jī)App，比如Anki等，大家一起下載并添加內(nèi)容
2. 制作一個(gè)動(dòng)態(tài)的Html，利用層級(jí)關(guān)系實(shí)現(xiàn)展開或收起答案，通過微信分享給大家

（二）選

我很快放棄了第一個(gè)方案，考慮到：

• 大家的手機(jī)系統(tǒng)不一樣，難以找到一款兼容各系統(tǒng)的軟件
• 即使有也幾乎都要付費(fèi)，并不是所有朋友都愿意為了還剩幾天的考試花錢
• 每個(gè)人都需要自己制作一遍單詞卡，無法一次操作多人共享

而我主觀認(rèn)為方案2可以很好地彌補(bǔ)這三個(gè)缺陷，于是開始落實(shí)它。

二、路與坎

既然是解決一個(gè)全新的問題，我就無法保證能夠按照自己的臆斷來順利完成，但也并非寸步難行。這就是第二步：

尚未超綱則步步為營：按照一般邏輯把能做的先做了。

（一）第一段路

我完成了以下步驟：

1. 整理好三十道例題的題干與答案
2. 按照層級(jí)關(guān)系進(jìn)行題目分類、答案分點(diǎn)
3. 制作對(duì)應(yīng)的動(dòng)態(tài)Html
4. 通過微信發(fā)送

（二）第一道坎

我遇到了第一道坎：通過微信發(fā)送完動(dòng)態(tài)的文本后，接收者無法在iOS上打開文件。嘗試處理：

• 微信無法直接打開，也不支持用蘋果自帶的Safari瀏覽器打開，用Chrome瀏覽器打開會(huì)報(bào)錯(cuò)
• 存儲(chǔ)至“文件”后可以打開，但是打開后是靜態(tài)文本，無法實(shí)現(xiàn)答案的收展
• 將CSS與Html打包，仍然無法實(shí)現(xiàn)動(dòng)態(tài)功能

我意識(shí)到這類本地Html無法直接使用，必須讓它能被手機(jī)瀏覽器打開，那就得把它上傳到網(wǎng)上

（三）第一次檢索

網(wǎng)上搜索到的經(jīng)常會(huì)看不懂，需要做到第三步：

亂而不明則兼收并蓄：收集并總結(jié)有用的信息，適當(dāng)?shù)匮由臁?/span>

通過Google和百度，我檢索了“怎么把本地的Html上傳到網(wǎng)上”，檢索結(jié)果包括：

• 博客類：專業(yè)人員直接貼代碼
• 廣告類：服務(wù)器商家推銷產(chǎn)品
• 問答類：簡要的描述上傳步驟

以上三個(gè)我都沒有辦法直接使用，我看不懂、買不起、做不來。但這三類信息有一些共性，我提取出了關(guān)鍵信息：購買服務(wù)器，通過FTP上傳。

我考慮是否可以有免費(fèi)的方法，于是想到通過微信小程序上傳，相當(dāng)于借助騰訊的服務(wù)器。

（四）第二段路

我完成了以下步驟：

1. 在微信公眾平臺(tái)注冊(cè)小程序
2. 下載小程序?qū)Ｓ玫拈_發(fā)工具
3. 按照官方教程導(dǎo)入項(xiàng)目文件夾

（五）第二道坎

問題來了：項(xiàng)目中的index.html無法用于小程序開發(fā)工具。嘗試處理：

• 查閱到小程序開發(fā)工具應(yīng)該使用特定的.wxml文件
• 我從GitHub上找到了可以把Html轉(zhuǎn)成Wxml的工具，轉(zhuǎn)換后再次導(dǎo)入開發(fā)工具
• 預(yù)覽后，在手機(jī)端打開小程序顯示的仍然是靜態(tài)頁面，失敗

我想我得放棄走小程序這條路了，上述問題可以解決，但我一個(gè)外行干不來，盯著這條路只會(huì)越走越遠(yuǎn)。

（六）第二次檢索

在第一次檢索到的信息和延伸出的方法失效后，已經(jīng)沒有明確的檢索目標(biāo)了。這是需要想出新方法才能繼續(xù)有東西檢索，所以第四步：

無跡可尋則創(chuàng)造痕跡：結(jié)合目的與經(jīng)驗(yàn)，思考可行的新方法，讓自己有信息可查。

這次該干什么？以前碼字時(shí)我有過搭建個(gè)人博客網(wǎng)站的念頭，是否可以搭建個(gè)人博客然后上傳本地Html。這非常可行，因?yàn)槲抑揽梢岳靡粋€(gè)叫Hexo的平臺(tái)搭建個(gè)人博客然后關(guān)聯(lián)到GitHub倉庫，利用它的服務(wù)器來免費(fèi)上傳。這是一個(gè)兩步走的方法：

1. 上傳：把本地的Html文件上傳到GitHub，但此時(shí)只能顯示源代碼
2. 轉(zhuǎn)換：利用Hexo把index.html展示出來

（七）第三段路

根據(jù)知乎上的Hexo個(gè)人博客搭建教程，我成功本地建站、關(guān)聯(lián)GitHub、提交配置和Html。我將域名發(fā)給朋友們，完成了此次分享。

三、大方向與小細(xì)節(jié)

其實(shí)以上所述是我完成這件事的幾個(gè)大節(jié)點(diǎn)，是保證探索方向正確的關(guān)鍵，但過程中的很多細(xì)節(jié)處理遠(yuǎn)稱不上順利，但這也讓我收獲了一些技巧和理念。這些收獲對(duì)處理網(wǎng)絡(luò)信息有很大幫助。

（一）再來一遍

從小到大，電腦遇到了問題，我使用得最多的解決方法就是重啟，也許一些問題只需要略加操作即可解決，但我不懂，只有通過重啟來避免排查問題。我也試過排查問題，但在時(shí)間成本方面，重啟是最經(jīng)濟(jì)的做法。

做專業(yè)不對(duì)口的事情，排查問題、弄清原理是非常耗時(shí)的；如果只需要達(dá)成當(dāng)前的特定目標(biāo)，照葫蘆畫瓢地遍歷每個(gè)步驟反而是最高效的

在搭建博客時(shí)，本地建站需要新建空文件夾、安裝Hexo、啟動(dòng)插件、清空、配置等等各種各樣的步驟，稍微錯(cuò)一步就會(huì)報(bào)錯(cuò)，我大概有一個(gè)小時(shí)都陷在了“打不開本地博客”的問題里。一開始我是檢查終端命令行，哪一步有問題我就修改，但始終差一點(diǎn)。

后來，經(jīng)過多次從第一步到最后一步的完整操作，建站成功。我已經(jīng)不關(guān)心之前報(bào)錯(cuò)是什么原因了，成功就行。

（二）站內(nèi)挖掘

我在網(wǎng)上檢索時(shí)會(huì)帶著浮躁心態(tài)，搜索引擎推薦給我各個(gè)網(wǎng)站，我一一瀏覽過去，看不到想要的就退回去，繼續(xù)下一個(gè)網(wǎng)站。這種“泛檢索”完全浪費(fèi)了網(wǎng)站“物以類聚”的特性。一些專門性的網(wǎng)站的站內(nèi)聯(lián)想推薦往往比大型搜索引擎的推薦要更精準(zhǔn)。

遇到解答不了自己疑惑的文章，往下翻一翻，在同一個(gè)網(wǎng)站內(nèi)深度挖掘。畢竟這一整個(gè)網(wǎng)站都是沖這門學(xué)科來的。

在提交本地Html時(shí)，我發(fā)現(xiàn)Hexo只能展示Markdown文本，因?yàn)樗皇莻€(gè)博客平臺(tái)，文本才是主要內(nèi)容。我搜索了“怎么在Hexo顯示本地Html”，搜索結(jié)果非常少。

我選擇了CSDN網(wǎng)站的鏈接，上面是一位專業(yè)人員分享的解決類似問題的方法。但由于它是專業(yè)的，很多步驟跳過了，我沒有辦法完全照做。于是我繼續(xù)往下翻，發(fā)現(xiàn)有大量同行分享了各自的方法，通過不斷點(diǎn)擊網(wǎng)站推薦的帖子，我最終整理出了完整的提交流程。

（三）不妨一試

最后一步卡住了我好久，我已經(jīng)新建了“about”文件夾，成功提交了Html，但是打開個(gè)人博客時(shí)還是不顯示頁面鏈接。CSDN上的帖子已經(jīng)翻得差不多了，沒有一個(gè)講了怎么跳轉(zhuǎn)到“about”，好像他們提交完就可以直接顯示了。

對(duì)于外行來說，靈光乍現(xiàn)真是一棵救命稻草，我在個(gè)人博客的域名后添加了“/about”，回車，成功跳轉(zhuǎn)。

要是網(wǎng)上的信息實(shí)在幫不了忙，不如利用常識(shí)放手一試，也許很蠢，也許很成功。

四、尾聲

這件事情解決的完美嗎？我不知道。有更高效的上傳方案嗎？我不知道。如果不是自己在網(wǎng)上搜，而是直接問程序員朋友，會(huì)更省事嗎？我也不知道。

說不定過一陣子，我和哪個(gè)朋友聊起這件事，他一語道破我把這件事做得太復(fù)雜，完全可以換一種思路輕松完成，到時(shí)候我會(huì)訕笑一聲，自嘲好傻。

但終歸我會(huì)了“免于購買服務(wù)器和域名而直接上傳自己的本地頁面”這件事。

個(gè)搭建過程大約十分鐘就發(fā)布上線了，雖然，一直存在一些問題，“頁面iframe不支持引用非業(yè)務(wù)域名”，這是我網(wǎng)站形式造成的。

如果你是企業(yè)站或比較純粹的博客站等，沒有外部鏈接，那么，這個(gè)方法很適用。

那么，直接步入正題吧。

看看怎么用10分鐘就把自己網(wǎng)站轉(zhuǎn)換成微信小程序。

操作步驟：

1、申請(qǐng)SSL證書，轉(zhuǎn)https（不會(huì)的看下文，如果你用的是寶塔更簡單，此文未介紹）。

網(wǎng)站防篡改全站http轉(zhuǎn)https完整流程

https://mp.weixin.qq.com/s?__biz=MzU4ODM5MDkyMg==&mid=2247484609&idx=1&sn=6f1baa81167e08037508a62b05e47764&chksm=fddc33a4caabbab214150f70ea1400317e4dbb4c9864dc1c2735c863cafe25b1e931cecdcd15&scene=21#wechat_redirect

2、申請(qǐng)注冊(cè)小程序賬號(hào)（此方法，個(gè)人注冊(cè)小程序不行，必須企業(yè)或組織的）

不會(huì)注冊(cè)的，注冊(cè)流程看這里。

https://jingyan.baidu.com/article/295430f13472ee4d7e0050e4.html

個(gè)人版后臺(tái)無此“業(yè)務(wù)域名”配置功能

在綁定“業(yè)務(wù)域名”時(shí)需上傳文件驗(yàn)證，所以登錄好服務(wù)器后臺(tái)或ftp工具。

3、小程序后臺(tái)配置好“服務(wù)器域名”及“業(yè)務(wù)域名”

4、下載微信開發(fā)者工具，找不到的看這里

https://jingyan.baidu.com/article/54b6b9c0d7ec6c6c583b47e4.html

5、安裝好之后，打開微信開發(fā)者工具，選擇小程序項(xiàng)目。點(diǎn)擊管理項(xiàng)目+號(hào)增加小程序。

6、桌面隨便新建個(gè)文件夾，小程序開發(fā)工具，選擇空白文件夾，并輸入AppID，不要使用云服務(wù)，點(diǎn)擊新建即可。

7、打開app.json文件，修改第9行“ ”內(nèi)文字為自己小程序名稱，之后保存。

8、打開路徑/pages/index/index.wxml文件，清空內(nèi)容。

9、將下面代碼粘貼進(jìn)去，修改為自己的域名，之后保存，可見左側(cè)網(wǎng)站已顯示出來。

<web-view src="https://www.zhibushi.com"></web-view>

10、之后直接點(diǎn)擊上傳即可。

ps:上傳之前可以先真機(jī)調(diào)試檢查下是否有如我這樣的問題。

11、最后，回到公眾號(hào)服務(wù)平臺(tái)提交審核即可，審核通過即可提交上線。

前面也說了，我的是因?yàn)榫W(wǎng)站性質(zhì)的問題，所以會(huì)不斷跳出“不支持非業(yè)務(wù)域名”，一般的企業(yè)站等不會(huì)有外部域名，也就不會(huì)出現(xiàn)這種問題，當(dāng)然，換了友鏈之類也會(huì)彈出提醒。

當(dāng)時(shí)做這個(gè)小程序，也是我第一次接觸小程序。本來只是拿來練手，只是希望能把網(wǎng)站轉(zhuǎn)成小程序，也能方便搜索訪問下載資源，但每打開一個(gè)頁面就要關(guān)閉下提醒的確有點(diǎn)煩。

后續(xù)也做過幾個(gè)不同類型的小程序，更熟悉了小程序的搭建，但上面的問題卻一直沒找到方法解決。除非網(wǎng)站重建或者重建小程序，但那樣就不是我當(dāng)建站的本意了。

這篇純教程，沒啥資源推薦，最近又補(bǔ)充了點(diǎn)新資源，需要就老地方自取！！