Developer Justin James describes the process and the advantages of converting his personal site from a CMS to static HTML in Expression Web.
I have maintained a personal website for as long as I can remember. One of the perpetual frustrations I have had with it is the matter of a content management system (CMS) underneath it. For the last few years, it has been running on top of the MODX CMS, which I like a lot. Unfortunately, what I don't like is the maintenance duties underlying a CMS, so I let things get really outdated, to the point where getting back up to speed will be painful.
For the last few years I've been using Microsoft Expression Web for some other sites, and I decided to take a step backwards and bring my site from a CMS to static HTML in Expression Web. The big reason I could do this is because Expression Web has an excellent templating system (Dynamic Web Templates, or DWTs) that give me probably 80% of what I was using the CMS for anyway: the ability to control the HTML output from a single file or source. With DWT, you define "editable regions" that can be changed on a per-page basis, while the rest of the page comes from the DWT. To make an editable region, put the following code into the DWT:
<!— #BeginEditable "regionname" —><!— #EndEditable —>
Be sure to change "regionname" to something sensible and unique for each editable region. Also, you can pre-populate the editable region with content if you want — just put it between the opening and closing tags. Along the way, I made the site structure more sane for a static site, and split out some of the CSS into separate files. Also, I took the small amount of effort to move to HTML5 for the site; it was already adhering to XHTML 1.1, so a simply change in DOCTYPE did the job. Standards are good!
My first step in the process was to create a new Site in Expression Web, and then to make a new DWT. For the DWT, I copied and pasted my existing MODX site template, and where the MODX template had placeholders for content, I either used static content in the DWT, or I made an editable region, depending on the need. Once I had the DWT made, I re-created the virtual folder structure from MODX with a directory structure, and then created HTML pages based on the DWT. I quickly went through the MODX site, copying and pasting the content from each page into the "content" editable region that the template had. After about an hour, I had copied in all of the pages I wanted.
The last big step in replacing the CMS was the matter of a menu. For the time being, I turned the pages into ASPX pages and used the TreeView ASP.NET WebPart connected to a Site Map DataSource, but this "solution" is temporary. Frankly, I do not want to rely upon any particular server-side technology for this site right now, to give me a site that can be completely moved to another server via FTP in a few minutes without care for the type of destination site. Also, maintaining the site map XML file is just as much work as maintaining links within the DWT itself. I will be moving to a jQuery-based menu system; I just need to pick one and move ahead with it.
Once I move to deployment, I will need to make an URL rewrite map to ensure that my links aren't broken, and I might use an automated tool to generate an XML site map for the search engines, though the site isn't big enough or have enough hidden content to justify that step.
Overall, it took me about two hours to convert a small (about 20 pages) site to static HTML. The advantages I will be seeing from the move are:
- Technology agnostic site;
- No maintenance of underlying technologies;
- Elimination of security concerns, both existing and potential;
- Easier to create new content;
- 100% control over the HTML; and
- Easier to experiment with jQuery, HTML5, and other new technologies.
Keep your engineering skills up to date by signing up for TechRepublic's free Software Engineer newsletter, delivered each Tuesday.