diff options
Diffstat (limited to 'wired/old/published/Webmonkey/blogcms')
| -rw-r--r-- | wired/old/published/Webmonkey/blogcms/movable_type_intro.txt | 118 | ||||
| -rw-r--r-- | wired/old/published/Webmonkey/blogcms/wordpress_intro.txt | 104 |
2 files changed, 222 insertions, 0 deletions
diff --git a/wired/old/published/Webmonkey/blogcms/movable_type_intro.txt b/wired/old/published/Webmonkey/blogcms/movable_type_intro.txt new file mode 100644 index 0000000..f2466ee --- /dev/null +++ b/wired/old/published/Webmonkey/blogcms/movable_type_intro.txt @@ -0,0 +1,118 @@ +So you've decided that hosted blogging is for the birds and you want more control over your blog setup. One popular option is the Movable Type publishing system from Six Apart. Movable Type contains pretty much everything you need to get your own site up and running and, with a little creativity and some community-created plugins, you can power much more than just a blog. + +This tutorial will walk you through the process of setting up Movable Type, customizing the look and feel of your new site and get you started with some custom features by installing some plugins. + +==Which Version to Use== + +Movable Type is essentially a collection of Perl scripts that make it easy to create and publish blog entries. Luckily you don't need to know any Perl as most of the programming aspects are hidden from the casual user. + +Movable type will run on just about any server, the only requirements are a database and the ability to run CGI scripts. + +There are currently two separate distributions of Movable Type, the [http://www.movabletype.com/ commercial version] (still free for individual users) and the [http://www.movabletype.org/ open source version]. Deciding which on to use depends what you need and what you're willing to pay for. The personal version of the commercial software can be used so long as your blog is not for-profit. Google AdSense, Amazon Associates fees, PayPal tip jars, or other similar programs which aren't the main purpose of the site are permitted under the Personal license. The commercial versions run from $300 - $1000 depending on the number of users your installation needs. + +The open source version of Movable Type is free and of course you're free to tinker with the source code and can apply patches, hacks and other improvements that the community comes up. Were it not for the fact that thus far the open source version has lagged behind the release schedule of the commercial version, we'd recommend it. If being a little behind the latest-and-greatest feature curve doesn't bother you, the open source version is an excellent choice. + +==Getting Up and Running== + +Assuming you've selected a web host that meets the Movable Type requirements (pretty much anywhere that offers a MySQL database will work) you're ready to install Movable Type. + +Installation isn't a terribly difficult process. Essentially you're going to download the MT package, unzip it and then upload it to your server. Then it's just a matter of configuring a few settings, like telling MT where to find your database and how to connect. + +Instructions on how to install are widely available on the web so we won't rehash them here. Check out [http://www.movabletype.org/documentation/installation/ the official guide] and also worth a mention is the [http://www.superxm.com/2007/08/movable-type-4-installation-step-by-step-with-screenshots.html MT installation guide over at SuperMX.com] which walks you through all the necessary steps and includes screenshots. + +Once you've got everything working properly it's time to set up your blog. + +Login to your new Movable Type admin and in the main menu select "Create New Blog." Give your blog a name, set up the necessary paths to your media files (like stylesheets or images), setup the URLs (or go with the example http://www.yoursite.com/blog/) and select a time zone. + +Save your changes and if you head to the URL you entered you should see a rather basic looking page with very little content -- congratulations you've now got a Movable Type powered blog. + +Add a little content so you have something to see while we customize the look in feel in the next section. Go ahead and create some new posts and save them. Just click the "Write Entry" button in the main menu, or choose Create > Entry in the main menu. This will display the Create Entry screen where you can enter your first blog post. + +==Customizing Your Site's Appearance== + +The stock Movable Type look isn't going to impress your visitors. Luckily it isn't hard to customize your Movable Type site. But before we start doing that let's step back and take a look at how Movable Type works. + +===How Movable Type Works=== + +In order to get MT behaving the way you want it's important to understand how it works. Movable Type has two main components, the back administration interface where you can manage your blogs, post new entries, moderate comments and more, and the front-facing public website. + +For the most part Movable Type publishes static html files. When you post an entry, Movable Type adds the entry to the database and then uses a template to create the HTML file that your visitors will see. It also updates any other pages that are affected by the changes (for instance if you have a sidebar that shows recent entries, MT will update the sidebar whenever you publish something new). + +This process is known as static publishing. That is, the page your visitors see is a static file sitting on your server rather being generated-on-the-fly like other systems such as WordPress. Actually Movable Type does offer some dynamic template features, but for this introduction we'll stick to the static publishing. + +The key elements here, from a user point of view, are the templates. By default Movable Type gives you some basic templates that control how your generated pages will look. To customize the look and feel of your site you'll want to dive into the templates. + +===The Movable Type Template Language=== + +Movable Type templates have their own language that looks at times like HTMl and times more like PHP. The basic idea is that you have a bunch of variables from the MT back-end that you can use to plug content into your pages. + +As with programming languages you can create if/else statements, for loops and other tools to display the content you want, where you want it. + +The template language is actually quite robust (some might say complex), so to give you an idea of how it works we'll dive in with a quick example. + +<code> +<h2>Recent Entries</h2> +<ul> + <MTEntries lastn="5"> + <li><$MTEntryTitle$> <br /> + <$MTEntryEntryExcerpt$></li> + </MTEntries> +</code> + +This chunk of code is similar to what you might use to generate a list of recent entries in your sidebar. The key to this is the <code><MTEntries></code> tag, which is known as a container tag. <code><MTEntries></code> essentially creates a loop of recently published entries. The <code>lastn</code> parameter tells Movable Type how many entries to grab, in this case five. + +Then we move inside the <MTEntries> container and we have access to all the Entries tags. For a complete list of tags related to entries, see the Movable Type manual. For this simple case I've used <code><$MTEntryTitle$></code> to print out the title and <code><$MTEntryEntryExcerpt$></code> to give a short summary. The <code><$MTEntryEntryExcerpt$></code> tag will automatically create an Excerpt if your entry doesn't have one. + +Let's look at another useful container tag, the MTEntryCategories tag. Here's a little snippet of code: + +<code> +<p>category: <MTIfNonEmpty tag="MTEntryCategory"><MTEntryCategories glue=", "> +<a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$></a> +</MTEntryCategories> +<MTElse>none</MTElse> +</MTIfNonEmpty></p> +</code> + +So what does that mess do? Well the goal is display all the categories you've assigned to a post. So the first thing we do is check to see if the post actually has any categories. The easiest way to do that is with the <code>MTIfNonEmpty</code> tag. This tag takes another tag as a parameter, in this case the <code>MTEntryCategory</code> tag, and checks to see if the value exists. + +If in fact our post has one or more categories assigned to it, then we proceed to the <code>MTEntryCategories</code> container tag. This tag sets up a loop that moves through all the categories assigned to an entry. + +Once inside the categories loop we print out a link to the category archive page and the name of the category. That way any visitor to the site who likes your article about bananas can quickly find all your articles in the banana category. + +The other thing to note in this loop is that just about any MT tag that uses an IF statement can include an Else tag to print out something when the if fails. In this case, if there is no category assigned to a post it will just print "none." + +Whew. What a mouthful of template tags. And we've barely even scratched the surface. For more in depth info on MT template tags read through [http://www.movabletype.org/documentation/appendices/tags/ the template tag documentation]. For those who'd like a somewhat easier to navigate list of tags, check out [http://www.mttags.com/ MTTags.com], which offers a very nice interface for navigating through and quickly finding definitions of the myriad of available template tags. + +If you've used older version of Movable Type, check out the overview of [http://www.movabletype.org/documentation/designer/whats-new.html new template tag features in MT 4.+], including the very powerful new ability to assign multiple values to an attribute. + +===Put template language to Use=== + +So where do you put your template code? Well, MT includes the ability to edit your templates right in the admin interface. Just select Design > Templates from Movable Type's main menu. This will display the Blog Templates screen. + +To edit one of your index templates, just click on the template name to open the Edit Template screen. Once you're here the sky's the limit, you can customize the layout and look of you site to fit whatever your heart desires. + +This screen is also home to the Includes and Widgets that have been referenced in the template you are editing. For example, by default the Main Index template references a Header, Entry Summary and Footer modules. This allows you to quickly edit and make site-wide changes to say your header template. Whenever you find yourself wanting to include a chunk of code in multiple templates, break that code out to an Includes template so that when you want to change it again you only need to do so in one spot. + +==Widgets and Plugins== + +The whole point of using a publishing tool like Movable Type is to take advantage of the many cool tools that users have developed -- that's where plugins come in handy. + +Movable Type has been around for some time and third party developers have built a small ecosystem of plugin and widgets to enhance your MT blog. + +For a fairly complete list of what's available check out the [http://plugins.movabletype.org/ Movable Type plugin directory]. Here's a few of our favorites: + +# [http://plugins.movabletype.org/bookmarks/ Bookmarks] - adds a "Bookmarks" menu to Movable Type 4.0's menuing system, allowing quick access to your favorite and most frequently accessed pages within the application. +# [http://plugins.movabletype.org/fckeditor/ FCKeditor] - swap out the default Movable Type Rich Text Editor for the more feature-rich FCKeditor (requires MT 4.1) +# [http://plugins.movabletype.org/flickrphotos/ Flickr Photos] - pull your most recent photos on Flickr into your Movable Type blog. +# [http://plugins.movabletype.org/dashboar/ Dashboard Twitter] - see your friends timeline and post your Twitter status update from within the MT4 dashboard. +# [http://plugins.movabletype.org/action-streams/ Action Streams] - aggregate, control, and share your actions around the web as well as a list of your profiles on various services. +# [http://plugins.movabletype.org/gravatar/ Gravatar] - Add some personality to your comments by including thumbnail images. Uses Gravatar's global recognized avatar system to output the correct gravatar image URL based on the commenters email address. + +So how do you install plugins? Well it depends on the plugin since the functionality of the plugin determines how much there is to install. In the simplest case you just drag the plugin to your plugins folder in the Movable Type folder you installed at the beginning of this tutorial. + +More complex plugins may require some additional files to be placed in other folders and, in some cases, a line or two needs to be added to the mt-config file. Fortunately most plugins listed in the official repository have reasonably clear instructions. + +==Happy Blogging == + +Though we've really just scratched the surface of what you can do with Movable Type, hopefully this will get you up and running. For additional tutorials and help solving common problems, be sure to sign up for the [http://forums.sixapart.com/ Movable Type forum] and [wiki http://wiki.movabletype.org/Main_Page where you'll find like-minded people who can help you out with any bumps you encounter on the way to Movable Type nirvana. + diff --git a/wired/old/published/Webmonkey/blogcms/wordpress_intro.txt b/wired/old/published/Webmonkey/blogcms/wordpress_intro.txt new file mode 100644 index 0000000..a75cc0a --- /dev/null +++ b/wired/old/published/Webmonkey/blogcms/wordpress_intro.txt @@ -0,0 +1,104 @@ +Back when blogging was just catching on a small PHP-based publishing system was quietly released and quickly took the blogging community by storm. WordPress, as the system was known, was an instant hit thanks to its simplicity and open source license which allowed interested developers to extend and improve the system. + +Today WordPress powers everything from huge sites like [http://politicalticker.blogs.cnn.com/ CNN's Political Tracker] to thousands of personal blogs. Thanks to its easy step up process and the widespread availability of web hosts that offer one-click WordPress installs, you can get up and blogging in a snap. + +In this tutorial we'll assume that your web host doesn't have a one-click installer, but fear not, getting WordPress working on your domain won't take but a few minutes. Once you're up and running we'll take a look at different ways you can customize and extend your blog. + +==Installation== + +Much of WordPress's popularity stems from its dead simple installation process. All you need to get started with WordPress is a web host to serve the site, a MySQL database for WordPress to talk to and of course [http://wordpress.org/download/ the WordPress software itself]. + +Unzip the WordPress download and rename the <code>wp-config-sample.php</code> file to <code>wp-config.php</code>. Now fire up that file in your favorite text editor and fill in the details about your database so WordPress can connect to it. + +Now you just need to upload WordPress using an FTP program. Upload all the files to where ever you'd like you new blog to live. For instance, if you want your blog to be the root of your domain, upload all the files to your root web directory. If you want your blog to be at say <code>mysite.com/blog</code>, just upload all the WordPress files to a "blog" directory under the web root. + +Now you just need to run the install script by pointing your browser to http://mysite.com/blog/wp-admin/install.php (just adjust that URL to fit wherever you placed WordPress. + +The install script will walk you through naming your blog and creating a username and password for accessing the administration panel. + +Once that's done login to WordPress and you're ready to roll. If you run into any problems, have a look at the [http://codex.wordpress.org/Installing_WordPress#Famous_5-Minute_Install official WordPress installation guide], which covers some common issues. + +==Digging In== + +When you login to WordPress for the first time you'll encounter what's known as the Dashboard. The Dashboard tracks your recent activity and lets you know about and manage comments your visitors have left and tracks any incoming links from other sites. + +In order to have some content for when we start customizing our installation, go ahead and click the "Write a new Post" link and, well, write a quick post or two. + +Once you have a couple of posts done click the "Write a new page" button. Now what's a "page" versus a "post" you ask? Well, a post is an entry on your blog whereas a page represents something static like a contact page or an about me page. Go ahead and create a couple pages so you can see how they work in the next section. + +The other section that might catch your eye is "Links." Older versions of WordPress referred to this section as the Blogroll, but the name change reflects the more general purpose usefulness of Links. While you can still use Links to generate a blogroll linking to your friends' sites, you can also do other things like create an entire site navigation system for your sidebar. + +If you click the "visit site" button from any of the Admin pages, WordPress will dump you onto your live site so you can see what your changes look like. + +==Customizing the Look of WordPress== + +The default look for WordPress is a blue header above a two column layout -- you might even recognize it since many sites don't bother to customize. It's okay for a default layout, but if you want to personalize your WordPress site a bit, read on. + +Customizing WordPress's look happens through "themes." If you login to your WordPress admin and select the Design tab you'll see the main themes panel. Now you could head over to the Header Image and Color tab which features a very nice inline theme editor with color pickers and other tools that make it easy to customize the default theme. + +But frankly one of the advantages of WordPress is the number and variety of custom themes that members of the community have created. The official repository of themes is the [http://themes.wordpress.net/ WordPress Theme Viewer], so browser through that list, find something you like and download it. + +Then just unzip and upload the theme to the wp-content/themes directory provided by WordPress. Then just head over to the Design tab inside the WordPress admin and select your new theme. + +From there you can customize and tweak the theme to fit your whims. Different themes offer different levels of customization so what you can and cannot do will depend on the theme you're working with. In general you should be able to change the header image, layout options and colors on any theme. + +Also note that themes don't have to be site-wide. If you happen to blog about both cupcakes and software, you can assign your archive pages for cupcakes to use one theme and the software posts to use another. + +If you'd like to create your own theme it isn't too difficult, though it is more complex than just throwing together some HTML and CSS in a template. It helps to have a decent knowledge of PHP. If you'd like to get started using PHP check out our tutorial. + +==Plugins - tap the Power of the Community== + +One of the chief appeals to powering your blog with WordPress rather than building your own system is that you can take advantage all of the cool tools that other people have developed. The WordPress plugin universe offers something for everyone, whether you just want to add some photos or turn your blog into a proto-social network using the plugins from the [http://code.google.com/p/diso/ DiSo project]. + +To get you started, here's a few of our favorites: + +# WP-Cache - Caches your pages for much faster loads. An absolute must, this should be part of WordPress by default. It works by caching WordPress pages and storing them in a static file for serving future requests directly from the file rather than loading and compiling the whole PHP code and the building the page from the database. Your site will thank you when Digg and Slashdot readers start pouring in. + +# [http://wordpress.org/extend/plugins/wordpress-flickr-manager/ WordPress Flickr Manager] - post images from your Flickrstream with ease. + +# [http://wordpress.org/extend/plugins/google-analytics-for-wordpress/ Google Analytics for WordPress] - track stats and more using Google Analytics. + +# [http://alexking.org/projects/wordpress Twitter Tools] - enable you to integrate your WordPress blog and your Twitter account. Pull your tweets into your blog and create new tweets on blog posts and from within WordPress. + +# [http://www.ilfilosofo.com/blog/wp-db-backup/ WordPress Database Backup] - creates backups of your core WordPress database tables. Backups are a must. + +# [http://www.ejump.co.uk/wordpress/easytube-plugin-for-wordpress/ EasyTube] - post YouTube videos using just the URL. This plugin takes the URL and uses it to embed the actual video. + +== Batten Down the Hatches== + +While WordPress is open-source and constantly updating to fix known vulnerabilities, it still behooves you to take a few steps to protect yourself against attacks. + +The first thing to do is makes sure that your WordPress installation is using the most current version available. To stay abreast of new releases consider subscribing to the [http://wordpress.org/development/ Developer Blog's RSS feed]. + +Beyond making sure that you have the latest security updates, there are few things in your server setup that can make WordPress more secure. + +One big thing you can do is limit access to your wp-admin directory. There are two approaches here, if you have a static IP and you're only likely to update your blog from a few locations you can actually deny access to all other IPs. The following instructions will work with any Apache server, for Microsoft Servers, consult the Microsoft documentation. + +To do that log into your web server via ftp and navigate to the wp-admin directory. Create a new file named <code>.htaccess</code> and enter the following lines: + +Order Deny,Allow +Deny from all +Allow from XXX.XXX.XXX.XXX + +Just replace the Xs with your home IP address. You can allow multiple IPs, just enter one per line. Now only requests from your IP addresses will be able to get to your WordPress login page. + +If your internet service provider frequently changes your IP, the above solution isn't practical. In that case you can still add some password protection to the wp-admin directory. To do so move up out of your publically accessable directories and create a folder that's only accessable from FTP or the shell. + +With most webhosts what would be the directory you see when you first login with you FTP client. Now create a file named <code>.htpasswd</code> and add the line <code>username:password</code> in that format with the username and password of your choice. + +Now go back to the <code>.htaccess</code> file in the wp-admin directory and add these lines: + +AuthUserFile path/to/.htpasswd +AuthGroupFile /dev/null +AuthName EnterPassword +AuthType Basic + +require user XXXX + +Replace the Xs above with the username you created in the .htpasswd file. Now if you navigate to your WordPress Admin pages you should be forced to enter a username and password before you even get to the WordPress login page. + +Neither of the solutions is totally foolproof, but they're generally enough to convince the script kiddies to move on to easier prey. + +== Conclusion == + +So there you have it, you should now have a working WordPress installation with a custom theme and some useful plugins. Happy blogging and be sure to check out our more advanced WordPress tutorial on creating custom themes and more.
\ No newline at end of file |