スマートコントラクトを用いてwebブラウザ上にHelloEthereum!を表示させたいと思います．
Truffle,node.js,Ganacheを使うので下記のサイトを参考にインストールしてください．

Dapps作成手順をイチから学べる！Truffleの「イーサリアム・ペットショップ」

コントラクトをデプロイする

ではまず任意のディレクトリにHelloEthereumというディレクトリを作成してください．

mkdir HelloEthereum

次に環境の構築をしていきます．
今回はtruffleというフレームワークを使用します．
truffleはEthereumの開発言語であるsolidityでの開発をサポートするフレームワークです．
まず以下のコマンドで初期化します．

truffle init

次に下記のコマンドでsolidityのファイルを作成します．

truffle create contract HelloEthereum

contract内にHelloEthereum.solというファイルが作成されるので編集します．

HelloEthereum.sol


pragma solidity ^0.4.22;

contract HelloEthereum {

  string private _word;
  constructor() public {
    _word = "HelloEthereum!";
  }
  function get() public view returns(string){
    return _word;
  }
}

getという関数を呼び出すとHelloEthereum!を返すというものです．

次にこのファイルをコンパイルします．

truffle compile

コンパイルが成功するとbuildディレクトリが生成されます．

次にmigrationファイルを作成します．

migrationsの中に2_deploy_contracts.jsというファイルを作成してください．

2_deploy_contracts.js

var HelloEthereum = artifacts.require("HelloEthereum");

module.exports = function(deploy){
    deploy.deploy(HelloEthereum);
}

次にtruffle.jsファイルを編集します．

truffle.js


module.exports = {
    networks:{
        development:{
            host: "127.0.0.1",
            port: 7545,
            network_id: "5777"
        }
    }
}

host,port,network_idは自身の設定に変更してください．
起動したらページの上部に記載されています．

最後にganacheを起動してから下記のコマンドでデプロイします．

truffle migrate

これでひとまずはテスト環境のブロックチェーンにデプロイが完了しました．

サーバの設定

node.jsを用いてサーバ環境を構築します．

npm init -y

今回はlite-serverを使用します．

npm install lite-server --save

そしてbs-config.jsonというファイルを作成します．
今回使用するlite-serverの設定ファイルです．

bs-config.json

{
  "server": {
    "baseDir": ["./src", "./build/contracts"]
  }
}

次にsrcフォルダを作成してください．
そしてtruffle-contractをインストールします.

npm install truffle-contract --save

node-modules/truffle-contract/dist内のtruffle-contract.jsというファイルをsrc内にコピーします．

最後にpackage.jsonを次のように編集します．
scriptsに"dev": "lite-server"を追加します．

package.json

{
  "name": "HelloEthereum",
  "version": "1.0.0",
  "description": "",
  "main": "truffle-config.js",
  "directories": {
    "test": "test"
  },
  "dependencies": {
    "lite-server": "^2.4.0",
    "truffle-contract": "^3.0.6"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "lite-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

これでサーバの設定は終了です．

フロントエンド部分の作成

最後にフロントエンドの部分を作成します.
index.htmlとindex.jsというファイルを作成し以下のように編集します．

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Hello Ethereum</title>
        <script src="https://cdn.jsdelivr.net/gh/ethereum/web3.js/dist/web3.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    </head>

    <body>
        <script type="text/javascript" src="./truffle-contract.js"></script>
        <script type="text/javascript" src="./index.js"></script>
    </body>
</html>

index.js

App = {
    web3Provider:null,
    contracts: {},

    initWeb3: function(){
        App.web3Provider = new web3.providers.HttpProvider("http://localhost:7545");
        return App.initContract();
    },

    initContract: function(){
        $.getJSON('HelloEthereum.json', function(data){
            var Artifact = data;
            App.contracts.HelloEthereum = TruffleContract(Artifact);

            App.contracts.HelloEthereum.setProvider(App.web3Provider);

            App.contracts.HelloEthereum.deployed().then(function(instance) {
                return instance.get.call();
            }).then(function(adopters){
                document.write(adopters);
            }).catch(function(err){
                console.log(err.message);
            });
        });
    }
}

window.onload = function(){
    App.initWeb3();
}

以下のコマンドを叩くとサーバが立ち上がりブラウザが立ち上がります．

npm run dev

HelloEtereumと表示されていたら成功です．お疲れ様でした．

Truffleとnode.jsでwebブラウザにHelloEthereum!

コントラクトをデプロイする

サーバの設定

フロントエンド部分の作成