首先需要獲取blockly程式碼，官方文件中獲取blockly程式碼有npm、github、Unpkg等多種方式。本文使用github，訪問blockly github倉庫連結https://github.com/google/blockly並下載，下載後的blockly程式碼目錄結構如下：
blockly程式碼目錄結構
注：上手階段只需關注圖中紅色標註的三個檔案和目錄，其中msg目錄暫時只用到msg/js目錄中的語言包，本文采用msg/js/zh-hans.js，表示為程式碼塊使用的語言為中文。
專案目錄結構新建目錄名為blockly-demo的資料夾，增加index.html，將已經下載的blockly程式碼也複製到該目錄下，如下圖：
blockly-demo專案目錄結構
匯入基礎模組使用自己喜歡的編輯器，新增如下程式碼，使用blockly需要引入blockly_compressed.js、blocks_compressed.js、msg/js/zh-hans.js三個基礎模組，其中blockly_compressed.js為核心指令碼，blocks_compressed.js為核心圖形程式碼塊集，zh-hans.js為語言模組，本例使用中文。
工作區=工具箱+編輯區
要建立工作區首先需要建立一個空白的div元素來承載，另外透過嵌入xml來表示工具箱，由於xml不能在瀏覽器中正常渲染，因此需要設定為不可見，編輯index.html增加如下程式碼
<script> var workspace = Blockly.inject('blocklyDiv', {toolbox: document.getElementById('toolbox')});</script>index.html的完整程式碼參考
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>blockly demo</title></head><body> <div id="blocklyDiv" style="height: 480px; width: 600px;"></div> <xml id="toolbox" style="display: none"> <block type="controls_if"></block> <block type="controls_repeat_ext"></block> <block type="logic_compare"></block> <block type="math_number"></block> <block type="math_arithmetic"></block> <block type="text"></block> <block type="text_print"></block> </xml> <script src="./blockly/blockly_compressed.js"></script> <script src="./blockly/blocks_compressed.js"></script> <script src="./blockly/msg/js/zh-hans.js"></script> <script> var workspace = Blockly.inject('blocklyDiv', {toolbox: document.getElementById('toolbox')}); </script></body></html>此時瀏覽器再次開啟或者重新整理已開啟的index.html，頁面顯示如下圖，試試拖放工具箱中的程式碼塊到編輯區，此時我們就完成了一個固定大小的工作區的建立。
完成工作區的注入