boydfields · December 7, 2024 17:43 · Oct 22, 2020 · May 8, 2018 · Jan 10, 2018 · Jan 2, 2018
diff --git a/localhost-ssl-certificate.md b/localhost-ssl-certificate.md
@@ -1,3 +1,7 @@
+🚨 __2020 Update__: I recommend using [mkcert](https://mkcert.dev) to generate local certificates. You can do everything below by just running the commands `brew install mkcert` and `mkcert -install`. Keep it simple!
+
+---
+
 *This gives you that beautiful green lock in Chrome.* I'm assuming you're putting your SSL documents in `/etc/ssl`, but you can put them anywhere and replace the references in the following commands. Tested successfully on Mac OS Sierra and High Sierra.
 
 ## Set up `localhost.conf`

diff --git a/localhost-ssl-certificate.md b/localhost-ssl-certificate.md
@@ -1,8 +1,8 @@
-*This gives you that beautiful green lock in Chrome.* I'm assuming you're putting your SSL documents in `/etc/apache2/ssl`, but you can put them anywhere and replace the references in the following commands. Tested successfully on Mac OS Sierra and High Sierra.
+*This gives you that beautiful green lock in Chrome.* I'm assuming you're putting your SSL documents in `/etc/ssl`, but you can put them anywhere and replace the references in the following commands. Tested successfully on Mac OS Sierra and High Sierra.
 
 ## Set up `localhost.conf`
 
-`sudo nano /etc/apache2/ssl/localhost.conf`
+`sudo nano /etc/ssl/localhost/localhost.conf`
 
 Content:
 
@@ -27,13 +27,18 @@ DNS.1 = localhost
 
 Run these commands:
 ```sh
-sudo openssl genrsa -out /etc/apache2/ssl/localhost.key 2048
-sudo openssl rsa -in /etc/apache2/ssl/localhost.key -out /etc/apache2/ssl/localhost.key.rsa
-sudo openssl req -new -key /etc/apache2/ssl/localhost.key.rsa -subj /CN=localhost -out /etc/apache2/ssl/localhost.csr -config /etc/apache2/ssl/localhost.conf
-sudo openssl x509 -req -extensions v3_req -days 3650 -in /etc/apache2/ssl/localhost.csr -signkey /etc/apache2/ssl/localhost.key.rsa -out /etc/apache2/ssl/localhost.crt -extfile /etc/apache2/ssl/localhost.conf
-sudo security add-trusted-cert -d -r trustRoot -k /Library/Keychains/System.keychain /etc/apache2/ssl/localhost.crt
+sudo openssl genrsa -out /etc/ssl/localhost/localhost.key 2048
+sudo openssl rsa -in /etc/ssl/localhost/localhost.key -out /etc/ssl/localhost/localhost.key.rsa
+```
+If you're changing the domain from localhost then update the variable `CN` in the following:
+```sh
+sudo openssl req -new -key /etc/ssl/localhost/localhost.key.rsa -subj /CN=localhost -out /etc/ssl/localhost/localhost.csr -config /etc/ssl/localhost/localhost.conf
+```
+I set the certificate to expire in 10 years (3650 days).
+```sh
+sudo openssl x509 -req -extensions v3_req -days 3650 -in /etc/ssl/localhost/localhost.csr -signkey /etc/ssl/localhost/localhost.key.rsa -out /etc/ssl/localhost/localhost.crt -extfile /etc/ssl/localhost/localhost.conf
+sudo security add-trusted-cert -d -r trustRoot -k /Library/Keychains/System.keychain /etc/ssl/localhost/localhost.crt
 ```
-Restart Apache: `sudo apachectl restart`
 
 Done.
 
@@ -44,8 +49,8 @@ The whole reason I got into this was to get browserSync to work over HTTPS. This
 ```js
 browserSync.init({
   https: {
-    key: "/etc/apache2/ssl/localhost.key",
-    cert: "/etc/apache2/ssl/localhost.crt"
+    key: "/etc/ssl/localhost/localhost.key",
+    cert: "/etc/ssl/localhost/localhost.crt"
   },
 });
 ```

diff --git a/localhost-ssl-certificate.md b/localhost-ssl-certificate.md
@@ -48,4 +48,19 @@ browserSync.init({
     cert: "/etc/apache2/ssl/localhost.crt"
   },
 });
+```
+
+Or in Webpacks (`webpack.config.watch.js` or `webpack.config.js`):
+
+```js
+new BrowserSyncPlugin({
+  advanced: {
+    browserSync: {
+      https: {
+        key: "/etc/ssl/localhost/localhost.key",
+        cert: "/etc/ssl/localhost/localhost.crt"
+      },
+    }
+  }
+}),
 ```
diff --git a/localhost-ssl-certificate.md b/localhost-ssl-certificate.md
@@ -1,8 +1,8 @@
-I'm assuming you're putting your SSL documents in `/etc/apache2/ssl`, but you can put them anywhere and replace the references in the following commands. *This gives you that beautiful green lock in Chrome.*
+*This gives you that beautiful green lock in Chrome.* I'm assuming you're putting your SSL documents in `/etc/apache2/ssl`, but you can put them anywhere and replace the references in the following commands. Tested successfully on Mac OS Sierra and High Sierra.
 
 ## Set up `localhost.conf`
 
-`sudo nano /etc/apache/ssl/localhost.conf`
+`sudo nano /etc/apache2/ssl/localhost.conf`
 
 Content:
 

diff --git a/localhost-ssl-certificate.md b/localhost-ssl-certificate.md
@@ -1,4 +1,4 @@
-I'm assuming you're putting your SSL documents in `/etc/apache2/ssl`, but you can put them anywhere and replace the references in the following commands. 
+I'm assuming you're putting your SSL documents in `/etc/apache2/ssl`, but you can put them anywhere and replace the references in the following commands. *This gives you that beautiful green lock in Chrome.*
 
 ## Set up `localhost.conf`
 

diff --git a/localhost-ssl-certificate.md b/localhost-ssl-certificate.md
@@ -1,8 +1,10 @@
 I'm assuming you're putting your SSL documents in `/etc/apache2/ssl`, but you can put them anywhere and replace the references in the following commands. 
 
-## Set up localhost.conf:
+## Set up `localhost.conf`
 
-Add this to `/etc/apache/ssl/localhost.conf`:
+`sudo nano /etc/apache/ssl/localhost.conf`
+
+Content:
 
 ```
 [req]

diff --git a/localhost-ssl-certificate.md b/localhost-ssl-certificate.md
@@ -35,6 +35,8 @@ Restart Apache: `sudo apachectl restart`
 
 Done.
 
+## Bonus: BrowserSync works over HTTPS
+
 The whole reason I got into this was to get browserSync to work over HTTPS. This will allow you to use browserSync in your gulpfile.js with the following added browserSync command:
 
 ```js

diff --git a/localhost-ssl-certificate.md b/localhost-ssl-certificate.md
@@ -1,13 +1,6 @@
-I'm assuming you're putting your SSL documents in `/etc/apache2/ssl`, but you can put them anywhere and replace the references in the following commands. This will allow you to use browserSync in your gulpfile.js with the following added browserSync command:
+I'm assuming you're putting your SSL documents in `/etc/apache2/ssl`, but you can put them anywhere and replace the references in the following commands. 
 
-```js
-browserSync.init({
-  https: {
-    key: "/etc/apache2/ssl/localhost.key",
-    cert: "/etc/apache2/ssl/localhost.crt"
-  },
-});
-```
+## Set up localhost.conf:
 
 Add this to `/etc/apache/ssl/localhost.conf`:
 
@@ -28,6 +21,8 @@ subjectAltName = @alt_names
 DNS.1 = localhost
 ```
 
+## Commands
+
 Run these commands:
 ```sh
 sudo openssl genrsa -out /etc/apache2/ssl/localhost.key 2048
@@ -38,4 +33,15 @@ sudo security add-trusted-cert -d -r trustRoot -k /Library/Keychains/System.keyc
 ```
 Restart Apache: `sudo apachectl restart`
 
-Done.
+Done.
+
+The whole reason I got into this was to get browserSync to work over HTTPS. This will allow you to use browserSync in your gulpfile.js with the following added browserSync command:
+
+```js
+browserSync.init({
+  https: {
+    key: "/etc/apache2/ssl/localhost.key",
+    cert: "/etc/apache2/ssl/localhost.crt"
+  },
+});
+```
diff --git a/localhost-ssl-certificate.md b/localhost-ssl-certificate.md
@@ -1,4 +1,4 @@
-I'm assuming you're putting your SSL documents in `/etc/apache2/ssl`, but you can put them anywhere and replace the folder names the commands. This will allow you to use browserSync in your gulpfile.js with the following added browserSync command:
+I'm assuming you're putting your SSL documents in `/etc/apache2/ssl`, but you can put them anywhere and replace the references in the following commands. This will allow you to use browserSync in your gulpfile.js with the following added browserSync command:
 
 ```js
 browserSync.init({

diff --git a/localhost-ssl-certificate.md b/localhost-ssl-certificate.md
@@ -1,4 +1,4 @@
-I'm assuming you're putting your SSL documents in '/etc/apache2/ssl', but you can put them anywhere and replace the folder names the commands. This will allow you to use browserSync in your gulpfile.js with the following added browserSync command:
+I'm assuming you're putting your SSL documents in `/etc/apache2/ssl`, but you can put them anywhere and replace the folder names the commands. This will allow you to use browserSync in your gulpfile.js with the following added browserSync command:
 
 ```js
 browserSync.init({

diff --git a/localhost-ssl-certificate.md b/localhost-ssl-certificate.md
@@ -35,4 +35,7 @@ sudo openssl rsa -in /etc/apache2/ssl/localhost.key -out /etc/apache2/ssl/localh
 sudo openssl req -new -key /etc/apache2/ssl/localhost.key.rsa -subj /CN=localhost -out /etc/apache2/ssl/localhost.csr -config /etc/apache2/ssl/localhost.conf
 sudo openssl x509 -req -extensions v3_req -days 3650 -in /etc/apache2/ssl/localhost.csr -signkey /etc/apache2/ssl/localhost.key.rsa -out /etc/apache2/ssl/localhost.crt -extfile /etc/apache2/ssl/localhost.conf
 sudo security add-trusted-cert -d -r trustRoot -k /Library/Keychains/System.keychain /etc/apache2/ssl/localhost.crt
-```
+```
+Restart Apache: `sudo apachectl restart`
+
+Done.
diff --git a/localhost-ssl-certificate.md b/localhost-ssl-certificate.md
@@ -6,7 +6,8 @@ browserSync.init({
     key: "/etc/apache2/ssl/localhost.key",
     cert: "/etc/apache2/ssl/localhost.crt"
   },
-});```
+});
+```
 
 Add this to `/etc/apache/ssl/localhost.conf`:
 

diff --git a/localhost-ssl-certificate.md b/localhost-ssl-certificate.md
@@ -1,11 +1,12 @@
 I'm assuming you're putting your SSL documents in '/etc/apache2/ssl', but you can put them anywhere and replace the folder names the commands. This will allow you to use browserSync in your gulpfile.js with the following added browserSync command:
 
 ```js
-https: {
-  key: "/etc/apache2/ssl/localhost.key",
-  cert: "/etc/apache2/ssl/localhost.crt"
-},
-```
+browserSync.init({
+  https: {
+    key: "/etc/apache2/ssl/localhost.key",
+    cert: "/etc/apache2/ssl/localhost.crt"
+  },
+});```
 
 Add this to `/etc/apache/ssl/localhost.conf`:
 

diff --git a/localhost-ssl-certificate.md b/localhost-ssl-certificate.md
@@ -0,0 +1,36 @@
+I'm assuming you're putting your SSL documents in '/etc/apache2/ssl', but you can put them anywhere and replace the folder names the commands. This will allow you to use browserSync in your gulpfile.js with the following added browserSync command:
+
+```js
+https: {
+  key: "/etc/apache2/ssl/localhost.key",
+  cert: "/etc/apache2/ssl/localhost.crt"
+},
+```
+
+Add this to `/etc/apache/ssl/localhost.conf`:
+
+```
+[req]
+default_bits = 1024
+distinguished_name = req_distinguished_name
+req_extensions = v3_req
+
+[req_distinguished_name]
+
+[v3_req]
+basicConstraints = CA:FALSE
+keyUsage = nonRepudiation, digitalSignature, keyEncipherment
+subjectAltName = @alt_names
+
+[alt_names]
+DNS.1 = localhost
+```
+
+Run these commands:
+```sh
+sudo openssl genrsa -out /etc/apache2/ssl/localhost.key 2048
+sudo openssl rsa -in /etc/apache2/ssl/localhost.key -out /etc/apache2/ssl/localhost.key.rsa
+sudo openssl req -new -key /etc/apache2/ssl/localhost.key.rsa -subj /CN=localhost -out /etc/apache2/ssl/localhost.csr -config /etc/apache2/ssl/localhost.conf
+sudo openssl x509 -req -extensions v3_req -days 3650 -in /etc/apache2/ssl/localhost.csr -signkey /etc/apache2/ssl/localhost.key.rsa -out /etc/apache2/ssl/localhost.crt -extfile /etc/apache2/ssl/localhost.conf
+sudo security add-trusted-cert -d -r trustRoot -k /Library/Keychains/System.keychain /etc/apache2/ssl/localhost.crt
+```