{"id":13,"date":"2009-05-12T14:12:46","date_gmt":"2009-05-12T19:12:46","guid":{"rendered":"http:\/\/www.danielwiener.com\/is\/tutorials\/13"},"modified":"2011-12-11T13:09:22","modified_gmt":"2011-12-11T18:09:22","slug":"create_virtual_host_mac","status":"publish","type":"post","link":"https:\/\/www.danielwiener.com\/is\/tutorials\/create_virtual_host_mac","title":{"rendered":"Create Virtual Host on Mac 10.5"},"content":{"rendered":"<h1><strong>CREATING A LOCAL WEBSITE ON MAC OS 10.5<\/strong><span><\/span><\/h1>\n<h4>Easy to follow, with lots of pictures.<\/h4>\n<p>\t\t\t\t<!-- Normal content area start --><\/p>\n<p>For each of my websites, I create a website on my own computer that <strong>exactly<\/strong> mirrors the online version. This is a tutorial that shows you how to set up your computer so it works like a webserver. I make all changes on the local website and test them before they are uploaded to remote websites. There are a few other tutorials that will tell you how to create virtual hosts on your Mac, but this is meant for people with little experience who need step-by-step instructions. I hope it is helpful.<\/p>\n<p>NOTE: You can also do this through the command line, using the Terminal, but  you probably don&#8217;t want to learn Unix right now.<\/p>\n<p> You can also download <a href=\"http:\/\/www.mamp.info\/en\/mamp.html\">MAMP<\/a>,  a program that  sets up Apache, MySQL, PHP, VirtualHosts, etc. for you and will do much of the work for you. I find doing it &quot;by hand&quot; is easier, though.<\/p>\n<h3>What you need to start<\/h3>\n<p>You will need to know your short username, usually the name of your &quot;home&quot; folder<\/p>\n<p>You will need to know the password for your user account on your computer.<br \/>\n                You created this password when you first set up your computer or installed OS 10.5.<\/p>\n<p>You  need a plain text editor. Here are a few popular choices:<\/p>\n<ul>\n<li><a href=\"http:\/\/www.barebones.com\/products\/bbedit\/\">BBedit<\/a>, a full featured text editor or <a href=\"http:\/\/www.barebones.com\/products\/textwrangler\/\">Textwrangler<\/a>, the &quot;lite&quot; version are available from Barebones Software                  <\/li>\n<li><a href=\"http:\/\/macromates.com\/\">Textmate<\/a><\/li>\n<li><a href=\"http:\/\/www.panic.com\/coda\/\">Coda<\/a>, also includes ftp, css editor, terminal and many other useful features.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p>I do not recommend using  the TextEdit application, included with all Macs. If you do useTextEdit, you must tell it to use &quot;plain text&quot; only.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/art\/app\/webroot\/img\/tutorials\/textedit.jpg\" width=\"413\" height=\"167\" alt=\"TextEdit Choose Plain Text\" \/><\/p>\n<p>It will be much easier to navigate and save documents if you use one of the several good text editors that are available. <\/p>\n<div class=\"divider1\"><\/div>\n<h3>Creating a folder for your local website.<\/h3>\n<p>Create a folder on your hard drive where your local site will reside. You can put this folder anywhere but I like to stick with the standard OS 10 folders so I put all my local sites in the Sites folder. As an example I have created a folder called &quot;a_new_site&quot;. Note that the folder name has no spaces and is all lowercase. Unix, the operating system &quot;underneath&quot; OS 10, is case sensitive and white spaces are considered characters. Your life will be much easier if you develop the habit of naming all website-related files and folders without capitals or white spaces.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/art\/app\/webroot\/img\/tutorials\/newsite_folder.jpg\" width=\"479\" height=\"197\" alt=\"New Site Folder\" \/><\/p>\n<div class=\"divider1\"><\/div>\n<h3>Editing the &quot;hosts&quot; file<\/h3>\n<p>Open up a disk browser in BBedit, File-&gt;New-&gt;Disk Browser. It will look something like this:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/art\/app\/webroot\/img\/tutorials\/diskbrowser_notinvisibles.jpg\" width=\"571\" height=\"258\" alt=\"bbedit disk browser\" \/><\/p>\n<p>Now, you will need to navigate to some of the system folders that are usually hidden from view, so you need to tell BBedit to show them to you. Click on the magnifying glass at the bottom left of the Disk Browser and select &quot;Invisible Items&quot;.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/art\/app\/webroot\/img\/tutorials\/bbedit_show_invisibles.jpg\" width=\"196\" height=\"180\" alt=\"bbedit show invisibles\" \/><\/p>\n<p>After selecting &quot;Invisible Items&quot; your Disk Browser should look something like this:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/art\/app\/webroot\/img\/tutorials\/bbedit_files_exposed.jpg\" width=\"361\" height=\"379\" alt=\"bbedit\" \/><\/p>\n<p>In BBedit&#8217;s Disk Browser, navigate to your hard drive.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/art\/app\/webroot\/img\/tutorials\/diskbrowser_navigate.jpg\" width=\"237\" height=\"154\" alt=\"bbedit navigate\" \/><\/p>\n<p>And then navigate to the folder named &quot;private&quot;, then to &quot;etc&quot;. You are looking for a file called &quot;hosts&quot;. If you don&#8217;t see it make sure that &quot;Text Files&quot; is <strong>unchecked<\/strong>. <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/art\/app\/webroot\/img\/tutorials\/bbedit_showallfiles.jpg\" width=\"234\" height=\"209\" alt=\"bbedit show all files\" \/><\/p>\n<p>Open &quot;hosts&quot; by double-clicking it.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/art\/app\/webroot\/img\/tutorials\/bbedit_hosts01.jpg\" width=\"639\" height=\"228\" alt=\"hosts file\" \/><\/p>\n<p>When you try to edit this document you will see the dialog box below:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/art\/app\/webroot\/img\/tutorials\/hosts_unlock.jpg\" width=\"481\" height=\"155\" alt=\"hosts unlock\" \/><\/p>\n<p>Click &quot;Unlock&quot;.<\/p>\n<p>You can now edit the &quot;hosts&quot; document. On a separate line write:<br \/>\n                  127.0.0.1<br \/>\n                  then hit &quot;tab&quot; on the keyboard and write the name you wish for the local site. In this example I call it www.newsite.dev (You can call it anything but I usually give the same name as the online site with the .dev ending. It makes it easy to remember).<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/art\/app\/webroot\/img\/tutorials\/hosts_with_name.jpg\" width=\"637\" height=\"236\" alt=\"hosts file\" \/><\/p>\n<p>Next you need to save the file but you will be need to be authenticated as someone who is allowed to change system files and so will be asked for your username and password.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/art\/app\/webroot\/img\/tutorials\/bbedit_save_password.jpg\" width=\"644\" height=\"491\" alt=\"bbedit save\" \/><\/p>\n<p>Enter password and click &quot;OK&quot;. Close the &quot;hosts&quot; file. You are done with it.<\/p>\n<div class=\"divider1\"><\/div>\n<h3>Editing the &quot;httpd.conf&quot; file<\/h3>\n<p>Now navigate to a folder called &quot;Apache2&quot;. It is in the &quot;etc&quot; folder. Open the file named &quot;httpd.conf&quot;. (You may want to save a copy with the default configuration, in case something goes wrong.) Find the line that says &quot;#Include \/private\/etc\/apache2\/extra\/httpd-vhosts.conf&quot;. It will be somewhere between line 450 and line 500. Remove the hash (#) sign to uncomment this line. You will have to unlock this file and enter your username and password to save it, just as you did with the &quot;hosts&quot; file. See images below.<\/p>\n<p>Before<br \/>\n                  <img loading=\"lazy\" decoding=\"async\" src=\"\/art\/app\/webroot\/img\/tutorials\/httpd_comment.jpg\" width=\"672\" height=\"332\" alt=\"httpd.conf\" \/><\/p>\n<p>After<br \/>\n                  <img loading=\"lazy\" decoding=\"async\" src=\"\/art\/app\/webroot\/img\/tutorials\/httpd_uncomment.jpg\" width=\"709\" height=\"328\" alt=\"httpd uncomment\" \/><\/p>\n<div class=\"divider1\"><\/div>\n<h3>Editing the &quot;httpd-vhosts.conf&quot; file<\/h3>\n<p>Next open the folder &quot;extra&quot; and open the file &quot;httpd-vhosts.conf&quot;. At the top of page there is an example (that is commented out) of the format for defining a virtual host. Farther down the page copy this format but with your own username, file paths and server name. Using the example, I have created, &quot;a_new_site&quot;, the virtual host definition would look something like this:<\/p>\n<p><code>&lt;VirtualHost *:80&gt;<br \/>\n                  DocumentRoot &quot;\/Users\/dwiener\/Sites\/a_new_site&quot;<br \/>\n                  ServerName www.newsite.dev<br \/>\n                  ScriptAlias \/cgi-bin\/ &quot;\/Users\/dwiener\/Sites\/a_new_site\/cgi-bin\/&quot;<br \/>\n                  ErrorLog &quot;\/private\/var\/log\/apache2\/newsite.dev-error_log&quot;<br \/>\n                  php_value include_path &quot;.:\/Users\/dwiener\/Sites\/a_new_site\/cgi-bin\/&quot;<br \/>\n  &lt;\/VirtualHost&gt;<\/code><\/p>\n<p>\n                  <img loading=\"lazy\" decoding=\"async\" src=\"\/art\/app\/webroot\/img\/tutorials\/httpd_vhosts.jpg\" width=\"704\" height=\"263\" alt=\"httpd_vhosts\" \/><\/p>\n<p> The only definitions that are required are &quot;DocumentRoot&quot; and &quot;ServerName&quot;. Many other definitions are possible but these will get you up and running. The ScriptAlias, Log paths and php include path are common definitions and are included because they  may help you in the long run. As you type this out, be very careful with quotes, white space and returns , they usually matter. Be sure to replace my username, &quot;dwiener&quot; with your username. Save this file. You will have entered your username and password to save it.<\/p>\n<div class=\"divider1\"><\/div>\n<h3>Creating the user file<\/h3>\n<p>Next, create a new file and add the following text:<\/p>\n<p>&lt;Directory &quot;\/Users\/dwiener\/Sites\/*\/&quot;&gt;<br \/>\n                  Options Includes Indexes Multiviews<br \/>\n                  AllowOverride All<br \/>\n                  Order allow,deny<br \/>\n                  Allow from all<br \/>\n  &lt;\/Directory&gt;<\/p>\n<p>Be sure to replace my username &quot;dwiener&quot; with your username. If you have placed your local website in another folder than &quot;Sites&quot; make sure you have the correct path. The &quot;*&quot; means that all folders in the Sites folder will be configured correctly.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/art\/app\/webroot\/img\/tutorials\/virtualhost_userfile.jpg\" width=\"631\" height=\"289\" alt=\"virtual hosting\" \/><\/p>\n<p>Then save this file in the &quot;users&quot; folder in the &quot;apache2&quot; folder, naming it with your username and the extension &quot;.conf&quot;, as shown above.<\/p>\n<div class=\"divider1\"><\/div>\n<h3>Restart Apache, your Web Server<\/h3>\n<p>Last but not least, you need to restart your Mac&#8217;s webserver.<\/p>\n<p>Open the System Preferences:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/art\/app\/webroot\/img\/tutorials\/preferences_open.jpg\" width=\"236\" height=\"270\" alt=\"system preferences\" \/><\/p>\n<p>Choose the &quot;Sharing&quot; Preference<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/art\/app\/webroot\/img\/tutorials\/preference_dialog.jpg\" width=\"669\" height=\"560\" alt=\"preferences Sharing\" \/><\/p>\n<p>Turn off &quot;Web Sharing&quot; by unchecking its checkbox.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/art\/app\/webroot\/img\/tutorials\/websharing_off.jpg\" width=\"643\" height=\"330\" alt=\"web sharing off\" \/><\/p>\n<p>Turn &quot;Web Sharing&quot; back on by checking its checkbox.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/art\/app\/webroot\/img\/tutorials\/websharing_on.jpg\" width=\"648\" height=\"433\" alt=\"Web Sharing On\" \/><\/p>\n<div class=\"divider1\"><\/div>\n<h3>Making an index file and testing the site. <\/h3>\n<p>Before you test this in your browser, let&#8217;s make an index file for &quot;a_new_site&quot;<\/p>\n<p>Create a new text file, write something like:<\/p>\n<p><code>&lt;p&gt;This is my new site.&lt;\/p&gt;<\/code><\/p>\n<p>Call it &quot;index.html&quot; and save it in the folder you created at the beginning of this tutorial &#8211; &quot;a_new_site&quot;, in this example.<\/p>\n<p>Then open your browser, point it to &quot;www.newsite.dev&quot; (or the server name you have chosen) and you should see:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/art\/app\/webroot\/img\/tutorials\/newsite.jpg\" width=\"664\" height=\"242\" alt=\"local site in browser\" \/><\/p>\n<div class=\"divider1\"><\/div>\n<h3>Be Patient          <\/h3>\n<p>Be patient with yourself. It probably won&#8217;t work the first time you test it. Go back over the files and check for misspellings and incorrect punctuation. When you are troubleshooting be careful to only change one thing at a time. If you change too many things at the same time you won&#8217;t know which modification is correct and which one is causing the problem. Also make sure that you restart the web server <strong>each<\/strong> time after you have changed one of the system files &#8211; &quot;hosts&quot;, &quot;httpd.conf&quot;, etc.<\/p>\n<div class=\"divider1\"><\/div>\n<h3>One more thing <\/h3>\n<p>Note: Verizon and some other ISP&#8217;s redirect your browser to an advertising landing page that they host, if you type an incorrect url in the browser. Since the url of your local server is only known and used by you, you may see the Verizon error page. This is very frustrating and intrusive. You can opt out of this service by clicking the link below.<br \/>\n              <a href=\"http:\/\/wwwz.websearch.verizon.net\/search?qh=www.asklfewa.com&amp;om=u&amp;rn=flx_vnlYoZ7JYcy&amp;qid=qs=06oENya4ZG02ry8Ey6VAoH9lgxsX18rRUuUeTGJ7qUFYwMqF4HMi_xgo7lcT-MDMvFOCAivQhfyvu11zNDpjb-eGWBqOqA6NuwWwKz3ToRKgdQ48A1cC_MrHTSoJaxqiTt7UIErkrax_uNBHdqtTKWI-EE0kOb0camPQnVoCw6v949ieZnMt74VUF5NYTFuoxREYDSRkNdWPscNnbCoTniYMByOPT3FnuggTCcfCEicE7Qzk_Un_yS1R4uEXbPtC2UZeuutjrT1POvitrHp446ycgWGrOYLTKw8YFuGbOnDYe7X_8Zvw5cLfI.,YT0z\">Opt out<\/a><\/p>\n<p>Or you can add 68.238.0.14 to System Preferences &gt; Network &gt; TCP\/IP &gt; DNS settings. This may vary from region to region. You may have to search Google to find a solution.<\/p>\n<div class=\"divider1\"><\/div>\n<h3>Good Luck <\/h3>\n<p>&nbsp;<\/p>\n<p>Good luck with virtual hosts. I hope I was of some help. Leave a comment<\/p>\n","protected":false},"excerpt":{"rendered":"<p>For each of my websites, I create a website on my own computer that mirrors the online version. This tutorial shows you how to set up your computer as a webserver. Other tutorials tell you how to create virtual hosts on your Mac. This one is for people with little experience and who need step-by-step instructions. <a href=\"https:\/\/www.danielwiener.com\/is\/tutorials\/create_virtual_host_mac\"><br \/>Read More<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-13","post","type-post","status-publish","format-standard","hentry","category-tutorials"],"_links":{"self":[{"href":"https:\/\/www.danielwiener.com\/is\/wp-json\/wp\/v2\/posts\/13","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.danielwiener.com\/is\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.danielwiener.com\/is\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.danielwiener.com\/is\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.danielwiener.com\/is\/wp-json\/wp\/v2\/comments?post=13"}],"version-history":[{"count":4,"href":"https:\/\/www.danielwiener.com\/is\/wp-json\/wp\/v2\/posts\/13\/revisions"}],"predecessor-version":[{"id":768,"href":"https:\/\/www.danielwiener.com\/is\/wp-json\/wp\/v2\/posts\/13\/revisions\/768"}],"wp:attachment":[{"href":"https:\/\/www.danielwiener.com\/is\/wp-json\/wp\/v2\/media?parent=13"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.danielwiener.com\/is\/wp-json\/wp\/v2\/categories?post=13"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.danielwiener.com\/is\/wp-json\/wp\/v2\/tags?post=13"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}