Skip to main content

Create your first page

Create a new page.html file

  1. In the files pane of your code editor, navigate to the folder src/pages/ where you will see the existing file page.html
  2. In that same folder, create a new file named about.html.
  3. Copy, or retype the contents of page.html into your new about.html file.
tip

Your editor might show a solid white circle on the tab label for this file. This means that the file is not yet saved. Under the File menu in VS Code, enable “Auto Save” and you should no longer need to save any files manually.

  1. Add /about to the end of your website preview’s URL in the address bar and check that you can see a page load there. (e.g. http://localhost:3333/about)

Right now, your About page should look exactly the same as the first page, but we’re going to change that!

Edit your page

Edit the HTML content to make this page about you.

To change or add more content to your About page, add more HTML element tags containing content. You can copy and paste the HTML code below between the existing <body></body> tags, or create your own.

src/pages/about.html
<body>
  <h1>Welcome to my CMS</h1>
  <h1>About Me</h1>
  <h2>... and my new Daikoku site!</h2>
</body>

Now, visit your /about page in your browser tab again, and you should see your updated content.

Add navigation links

To make it easier to preview all your pages, add HTML page navigation links before your <h1> at the top of both of your pages (page.html and about.html):

src/pages/about.html
<a href="/_/">Home</a>
<a href="/_/about/">About</a>

<h1>About Me</h1>
<h2>... and my new Daikoku site!</h2>

Check that you can click these links to move back and forth between pages on your site.

note

Unlike many frameworks, Daikoku CLI uses standard HTML <a> elements to navigate between pages (also called routes), with traditional page refreshes.

Publish your changes to your Daikoku

If you’ve followed our setup in Unit 1, you can publish your changes to your live Daikoku.

daikoku push

After waiting a few seconds, visit your Daikoku URL to verify that your changes are published live.