Download and unzip topseed-helloworld-master.zip
from https://github.com/topseed/topseed-helloworld to your location of choice on your developer machine.
Open your Google Chrome web browser and install the 'Web Server for Chrome' app from https://chrome.google.com/webstore/search/Web%20Server?_category=apps. Launch the app, click the 'Choose Folder' button and select the folder /public
under /topseed-helloworld/topseed-helloworld-io
. Also ensure 'Options' has 'Automatically show index.html' checked. Ensure the Web Server is STARTED, then navigate to the proposed URL (e.g. http://127.0.0.1:8887). You should see a demo website. Explore the site. It uses responsive design; resize the browser from fullscreen to narrow to see the layout adapt.
Download, install and run 'Visual Studio Code' (VS Code) from https://code.visualstudio.com/download. From 'File' menu, choose 'Open Folder...' and select folder /topseed-helloworld
. When the project is loaded, inspect the default entry page at /topseed-helloworld-io/public/index.html
. We like VS Code, but you can use any other editor of your choice.
Download, install and run Prepros (Unlimited Trial) from https://prepros.io/downloads. Use the '+' button on the bottom left to add the folder /topseed-helloworld
as a new project. In Project/Settings/Compiler Settings/Markdown, uncheck 'Wrap with HTML'.
In the browser, return to the home page (e.g. http://127.0.0.1:8887). In VS Code, open /public/page/one/_hello.md
and prefix the text with 'Hello World!' Save the file. In the same folder, inspect _hello.html. Prepros will have preprocessed your edited markdown file to HTML. Refresh the browser and see the edits. Search Google for 'Markdown syntax'.
Optional: Use Prepros to auto-refresh on edits. In Prepros, click on the arrows on the right side of the Prepros project name 'topseed-helloworld', check 'Sync Browsers' and click 'Preview' (or rightclick on 'topseed-helloworld' and select 'Open Live Preview'). A browser should open and display the home page. In VS Code, edit and save _hello.md
again. The opened browser should refresh and include your changes.