Home
How to create web page by Emacs Muse?
Sunday, 27 July 2008 19:24

Getting started

The current instruction is for Linux.

Make sure you have a working GNU Emacs.

Download the latest package to your home.

For example, in the terminal:

$cd
$wget http://www.xshi.org/notes/web-1.1.tar.gz

Unpack

$tar xzf web-1.1.tar.gz

Configure Emacs

Add the following into your ~/.emacs file:
(add-to-list 'load-path "~/web/source/emacs/muse")
(load "muse-init")

Open the first page

Here we use firefox as an example
$firefox ~/web/public_html/WelcomePage.html

Analyze the first page:

The site logo

First, on the top left corner of the page, you can see a site logo. The picture is located at:

~/web/public_html/pic/site-logo.png

You can replace your own or just remove it if you do not want a logo for now.

By the way, if your browser support, you might have seen a smaller logo appear on the address bar. That file is located at:

~/web/public_html/pic/favicon.ico

It can be generated by http://www.html-kit.com/favicon/.

The Page Title

At this moment, you can open the muse file with Emacs:

$emacs ~/web/source/wiki/front/WelcomePage.muse &

We can see that the title is just at the top of the muse file:

#title Welcome to my home page!
...

You can edit the title and save it. If you are not familiar with Emacs, you can save the file by typing C-x C-s (Ctrl x Ctrl s).

Now type C-c C-p will generate this muse file into html. You can refresh you web browser to see if the change has happened. If it works, congratulations!

Content of the file

Although there is only one sentence in this muse file (WelcomePage.muse), it contains the key component - links in the text file. You can see that the word "here" is colored (maybe green in your Emacs) and under scored. By moving your cursor to it and press Enter (a tips here is to use TAB or just middle click if your mouse does have the third key or wheel) you'll be guided into another muse page.

So, how dose this happen? You can unravel this by just type C-c C-l to disable the font-lock. Now, you can see that, in the word "Here" is actually made up by :

[[rule][Here]]

The content in the first square bracket is the real file name, i.e. rule.muse in the current directory.

Type in C-c C-l (Ctrl+c Ctrl+l) will turn off the font-lock, so that you can see the hyperlink in the file. By typing the key again, will turn on the font-lock.

Mark Up Rules

In the example page (rule.html or rule.muse), you can see some basic mark up rules in muse.

Color theme - CSS style sheet

The page color is controlled by the style sheet file :

~/web/public_html/css/common.css

Sidebar

(Thanks for Ben Dugan's question, so that I can add this section and update to the web-1.1 version.)

Compare the two files :

~/web/source/html/my-front-header.html
~/web/source/html/my-projects-header.html

You will notice those lines makes the sidebar:

<div id="sidebar">
    <h2>Links</h2>
    <ul>
    <li><a href="/../WelcomePage.html">Home</a></li>
    <li><a href="/WelcomePage.html">Projects</a></li>
    <li><a href="/../about.html">About</a></li>
    </ul>
</div>